โต้ตอบการอัปโหลดไฟล์ SVG และสร้างส่วนประกอบด้วย

ฉันต้องการแสดง SVG หลังจากอัปโหลดด้วยไฟล์อินพุต แต่ฉันไม่ต้องการให้มันแสดงด้วยแท็กรูปภาพและ base64 แต่แสดงด้วยแท็ก svg

ฉันได้สร้างไฟล์อินพุตเพื่ออัปโหลดเช่นนั้น:

import React from "react";
import { FormWrapper, UploadInput, LabelUploadInput, SubmitButton, Preview } from './ImageUpload.style.js';

class ImageUpload extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      file: '',
      imagePreviewUrl: ''
    };
  }

  handleSubmit(e, img) {
    e.preventDefault();
    console.log('handle uploading-', this.state.file);
    this.props.clickHandler(this.state.file, img);
  }

  handleImageChange(e) {
    e.preventDefault();

    let reader = new FileReader();
    let file = e.target.files[0];

    reader.onloadend = () => {
      this.setState({
        file: file,
        imagePreviewUrl: reader.result
      });
    }

    reader.readAsDataURL(file)
  }

  render() {
    let {imagePreviewUrl} = this.state;
    let $imagePreview = null;
    if (imagePreviewUrl) { console.log('imagePreviewUrl',imagePreviewUrl);
      $imagePreview = (<img src={imagePreviewUrl} style={{ position: 'absolute', left: '216px', width: '54px', height: '54px' }}/>);
    } else {
      $imagePreview = (<Preview>Aperçu</Preview>);
    }

    return (
      <>
        <FormWrapper onSubmit={(e)=>this.handleSubmit(e, imagePreviewUrl)}>
          <UploadInput className="fileInput"
                 type="file"
                 accept=".svg"
                 id={'uploadFile'}
                 onChange={(e)=>this.handleImageChange(e)} />
          <LabelUploadInput
            htmlFor={'uploadFile'}>
            Choisir un SVG
          </LabelUploadInput>
          <SubmitButton
                  type="submit"
                  onClick={(e)=>this.handleSubmit(e, imagePreviewUrl)}>Upload Image</SubmitButton>
        </FormWrapper>
        {$imagePreview}
      </>
    )
  }
}

export { ImageUpload };
export default ImageUpload;

มันทำงานได้ดี และในองค์ประกอบพาเรนต์นี้ฉันได้รับข้อมูล svg:

handleUploadFile(file, img) {
    this.setState({
      nameBackgroundElt: file.name.slice(0,-4),
      imageBackgroundUrl: img
    });
  }

แต่ฉันไม่รู้ว่าจะแสดงด้วยแท็ก SVG ได้อย่างไร ฉันพยายามถอดรหัส base64 แบบนั้น:

    var base64 = 'PHN2ZyBoZWlnaHQ9IjUxMiIgdmlld0JveD0iMCAwIDEyOCAxMjgiIHdpZHRoPSI1MTIiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+PGNpcmNsZSBjeD0iNjQiIGN5PSI2NCIgZmlsbD0iIzIzYThmZSIgcj0iMzUiLz48cGF0aCBkPSJtMzcuOTIxIDY3LjQyMy01LjA0LTQuMDMyLTIuMTUuNDctMS43LTEuMTA4Yy0uMDE0LjQxNS0uMDMxLjgyOS0uMDMxIDEuMjQ3YTM0Ljg0MiAzNC44NDIgMCAwIDAgNy4xMzcgMjEuMTc1bDMuODYzLTQuOTE2IDguNjA1LTEuMDA3LjA2Ni03LjYtNC4xLTUuMjQyeiIgZmlsbD0iIzhhZmZjNyIvPjxwYXRoIGQ9Im05Mi4zMyA0OS40IDQuODExIDMuMzVhMzUgMzUgMCAwIDAgLTQyLjI1MS0yMi41NDVsLjQxNiAxLjg1OCAxNS43MzUgNC4xNzYgMTEuNDU5IDQuNzQ4LTYuOTMyIDMuMTc2LTExLjY5OC0xLjI4OS0zLjU3LTMuNTc0LTUuOSAyLjMyNC03LjY4NiA3LjY4NnYxMC4xNDFsNS4xODMgNS4xODRoNi42MTRsNy43NzYgNy43NzV2OS45MjFsNS43NjEgNS43NjkgNy4zNzMtNy4zNzN2LTQuMjlsMy40LTMuNHYtNi43N2w1LjM3My01LjM3NC0xLjE4NC02LjY3My03LjM0LTQuNzQ0IDcuMDMtMy4wODd6IiBmaWxsPSIjOGFmZmM3Ii8+PHBhdGggZD0ibTY0IDExMi40MTlhNDguNDY2IDQ4LjQ2NiAwIDAgMSAtNDguMzg3LTQ3LjE3Mmg0LjEzN2wtOS0xMS43NS05IDExLjc1aDQuMDMyYTU4LjIzMiA1OC4yMzIgMCAwIDAgMTEwLjQ5NCAyNC40MjlsLTYuODY0LTguOTZhNDguNDY0IDQ4LjQ2NCAwIDAgMSAtNDUuNDEyIDMxLjcwM3oiIGZpbGw9IiNmZWU1NWEiLz48cGF0aCBkPSJtMTIyLjIxOCA2Mi43NTNhNTguMjMyIDU4LjIzMiAwIDAgMCAtMTEwLjQ5NC0yNC40MjlsNi44NjQgOC45NmE0OC4zOTIgNDguMzkyIDAgMCAxIDkzLjggMTUuNDY5aC00LjEzOGw5IDExLjc1IDktMTEuNzV6IiBmaWxsPSIjZmVlNTVhIi8+PGcgZmlsbD0iIzIzMWYyMCI+PHBhdGggZD0ibTU0LjUyNCAyOC41aC0uMDE2Yy0uMDIgMC0uMDM3LjAxNC0uMDU2LjAxOWEzNi43MiAzNi43MiAwIDAgMCAtMTkuOCA1Ny41NzYgMS43ODkgMS43ODkgMCAwIDAgLjIzMS4yOTQgMzYuNzMgMzYuNzMgMCAwIDAgNjMuOTE3LTM0LjE3OGMtLjAxNC0uMDQzLS4wMjYtLjA4Ny0uMDQ0LS4xMjlhMzYuNzI5IDM2LjcyOSAwIDAgMCAtNDQuMjMyLTIzLjU4MnptLTIzLjczMyAzNy4xMDZhMS43NTUgMS43NTUgMCAwIDAgLjMxMy0uMDM1bDEuMzM1LS4yOTMgNC4zODkgMy41MTJhMS43NTUgMS43NTUgMCAwIDAgMS4zNTcuMzY0bDUuNjQzLS44NTcgMy4wOTIgMy45NTQtLjA0NyA1LjQ0Mi03LjA3Mi44MjhhMS43NDYgMS43NDYgMCAwIDAgLTEuMTcyLjY1NmwtMi40MDkgMy4wNjNhMzMuMDIzIDMzLjAyMyAwIDAgMSAtNS40MjktMTYuNjM0em02Mi4yMTYtMTcuODMxLTUuNDg3LTIuOTNhMS43NDQgMS43NDQgMCAwIDAgLTEuNTI5LS4wNThsLTcuMDI0IDMuMDg4YTEuNzUgMS43NSAwIDAgMCAtLjI0NiAzLjA3MWw2LjcgNC4zMjkuODkyIDUuMDI1LTQuNzMzIDQuNzI4YTEuNzUyIDEuNzUyIDAgMCAwIC0uNTEzIDEuMjM4djYuMDQ2bC0yLjg4MyAyLjg4MmExLjc0OCAxLjc0OCAwIDAgMCAtLjUxMyAxLjIzOHYzLjU2OGwtNS42MjMgNS42Mi00LjAxNS00LjAxNXYtOS4yYTEuNzUgMS43NSAwIDAgMCAtMy41IDB2OS45MmExLjc1IDEuNzUgMCAwIDAgLjUxMyAxLjIzN2w1Ljc2NSA1Ljc2NWExLjc0OCAxLjc0OCAwIDAgMCAyLjQ3NCAwbDcuMzczLTcuMzczYTEuNzUgMS43NSAwIDAgMCAuNTEzLTEuMjM3di0zLjU2MWwyLjg4NC0yLjg4M2ExLjc0OSAxLjc0OSAwIDAgMCAuNTEyLTEuMjM3di02LjA0Nmw0Ljg2Mi00Ljg2YTEuNzQ3IDEuNzQ3IDAgMCAwIC40ODUtMS41NDNsLTEuMTg1LTYuNjczYTEuNzQ4IDEuNzQ4IDAgMCAwIC0uNzcyLTEuMTY0bC00LjYwNy0yLjk3OSAzLjI3MS0xLjQzOCA0Ljc5NCAyLjU2IDQuMjQ0IDIuOTU1YTMzLjIzOCAzMy4yMzggMCAwIDEgLTU3LjI4NiAzMS4zMTRsMi41NTctMy4yNSA3Ljg4Mi0uOTIyYTEuNzUgMS43NSAwIDAgMCAxLjU0Ny0xLjcyM2wuMDY2LTcuNmExLjc1OSAxLjc1OSAwIDAgMCAtLjM3MS0xLjA5M2wtNC4xLTUuMjQyYTEuNzYgMS43NiAwIDAgMCAtMS42NDItLjY1MmwtNS45Ljg5NS00LjQ0Mi0zLjU1NGExLjc1NiAxLjc1NiAwIDAgMCAtMS40NjgtLjM0M2wtMS40My4zMjItLjI0NC0uMTU5YTMzLjMxNCAzMy4zMTQgMCAwIDEgMjIuNzY2LTI5LjQxNHYuMDE4YTEuNzQ4IDEuNzQ4IDAgMCAwIDEuMjU4IDEuMzFsMTUuNjI3IDQuMTQ1IDcuNjQxIDMuMTY4LTIuODQ1IDEuMy0xMC42MDItMS4xNjgtMy4xNC0zLjE0YTEuNzQ2IDEuNzQ2IDAgMCAwIC0xLjg3OS0uMzkxbC01LjkgMi4zMjRhMS43NDMgMS43NDMgMCAwIDAgLS42LjM5MWwtNy42ODUgNy42ODVhMS43NTIgMS43NTIgMCAwIDAgLS41MTMgMS4yMzh2MTAuMTQ0YTEuNzUgMS43NSAwIDAgMCAuNTEzIDEuMjM3bDUuMTgzIDUuMTg0YTEuNzUyIDEuNzUyIDAgMCAwIDEuMjM4LjUxM2g2LjYxM2ExLjc1IDEuNzUgMCAwIDAgMC0zLjVoLTUuODg0bC00LjE1OC00LjE1OHYtOC42OTRsNi45MTYtNi45MTUgNC40OTMtMS43NyAyLjc2MyAyLjc2M2ExLjc0MiAxLjc0MiAwIDAgMCAxLjA0Ni41bDExLjY5NCAxLjI4OWExLjc1MyAxLjc1MyAwIDAgMCAuOTItLjE0OGw2LjkzMi0zLjE3NmExLjc0OSAxLjc0OSAwIDAgMCAtLjA1OS0zLjIwN2wtMTEuNDU1LTQuNzQ3YTEuNiAxLjYgMCAwIDAgLS4yMjEtLjA3NWwtMTIuNzM3LTMuMzc5YTMzLjIxNCAzMy4yMTQgMCAwIDEgMzQuMjU0IDE2LjYwN3oiLz48cGF0aCBkPSJtMTEwLjggNzkuNjUxYTEuNzUgMS43NSAwIDAgMCAtMy4wMzEuNDU5IDQ2LjY0MiA0Ni42NDIgMCAwIDEgLTkwLjMyNi0xMy4xMWgyLjMwN2ExLjc1MSAxLjc1MSAwIDAgMCAxLjM5LTIuODE0bC05LTExLjc1YTEuODE1IDEuODE1IDAgMCAwIC0yLjc4IDBsLTkgMTEuNzVhMS43NTEgMS43NTEgMCAwIDAgMS4zOSAyLjgxNGgyLjM0MmE1OS45ODQgNTkuOTg0IDAgMCAwIDExMy43NTUgMjMuNDQ5IDEuNzUxIDEuNzUxIDAgMCAwIC0uMTgxLTEuODM3em0tNDYuOCA0MC44NDlhNTYuNzk0IDU2Ljc5NCAwIDAgMSAtNTYuNDY5LTU1LjI5IDEuNzUgMS43NSAwIDAgMCAtMS43NS0xLjcxaC0uNDgxbDUuNDU1LTcuMTIyIDUuNDQ1IDcuMTIyaC0uNTkyYTEuNzQ5IDEuNzQ5IDAgMCAwIC0xLjc0OSAxLjggNTAuMTM5IDUwLjEzOSAwIDAgMCA5Ni4wMjYgMTguOTFsNC4zMzUgNS42NmE1Ni4xNDEgNTYuMTQxIDAgMCAxIC01MC4yMiAzMC42M3oiLz48cGF0aCBkPSJtMTI3LjgxOSA2MS45NzlhMS43NDkgMS43NDkgMCAwIDAgLTEuNTY5LS45NzloLTIuMzQyYTU5Ljk4NCA1OS45ODQgMCAwIDAgLTExMy43NTUtMjMuNDQ5IDEuNzUxIDEuNzUxIDAgMCAwIC4xODEgMS44MzdsNi44NjYgOC45NjFhMS43NSAxLjc1IDAgMCAwIDMuMDMxLS40NTkgNDYuODU3IDQ2Ljg1NyAwIDAgMSA0My43NjktMzAuNTU5IDEuNzUgMS43NSAwIDAgMCAwLTMuNSA1MC4zODUgNTAuMzg1IDAgMCAwIC00NS44ODUgMjkuOTU5bC00LjMzNS01LjY2YTU2LjE0MSA1Ni4xNDEgMCAwIDEgNTAuMjItMzAuNjMgNTYuNzk0IDU2Ljc5NCAwIDAgMSA1Ni40NjkgNTUuMjkgMS43NSAxLjc1IDAgMCAwIDEuNzUgMS43MTNoLjQ4NmwtNS40NTUgNy4xMjItNS40NS03LjEyNWguNTkyYTEuNzQ5IDEuNzQ5IDAgMCAwIDEuNzQ5LTEuOCA1MC40MDcgNTAuNDA3IDAgMCAwIC0yMS41Mi0zOS44NzkgMS43NSAxLjc1IDAgMCAwIC0yIDIuODcxIDQ2LjkyIDQ2LjkyIDAgMCAxIDE5LjkzNiAzNS4zMDhoLTIuMzA3YTEuNzUxIDEuNzUxIDAgMCAwIC0xLjM5IDIuODE0bDkgMTEuNzVhMS43NTEgMS43NTEgMCAwIDAgMi43OCAwbDktMTEuNzVhMS43NTEgMS43NTEgMCAwIDAgLjE3OS0xLjgzNXoiLz48cGF0aCBkPSJtODAuMDU4IDIwLjE3OWExLjc1IDEuNzUgMCAxIDAgMS4yMDctMy4yODVjLTEuMzYxLS41LTIuNzUyLS45NDQtNC4xMzYtMS4zMmExLjc1IDEuNzUgMCAxIDAgLS45MTYgMy4zNzljMS4yODcuMzQ3IDIuNTguNzYxIDMuODQ1IDEuMjI2eiIvPjwvZz48L2c+PC9zdmc+';

      var svg = atob(base64);
      const attr = 'id="test" className="cancelDragCity"';
      svg = svg.replace('<svg ', '<svg ' + attr);
     <Test svg={svg} />

โดยที่ Test เป็นองค์ประกอบง่ายๆ ที่แยกวิเคราะห์และแสดงผล SVG

import React from 'react';
import parse from 'html-react-parser';

class Test extends React.Component {
  render() {
    const parse = require('html-react-parser');
    const svg = parse(this.props.svg);
    return (
      svg
    );
  }
}

export { Test };
export default Test;

มันแสดง SVG ที่ถูกต้องบนเบราว์เซอร์ แต่การลากปฏิกิริยากลับไม่ทำงานหลังจากนั้น และฉันจะเปลี่ยน SVG ที่อัปโหลดโดยองค์ประกอบการตอบสนองของ SVG (ไม่ได้อัปโหลด แต่ในโค้ด) ก็ไม่เป็นไร

แต่ฉันต้องการให้อัปโหลด SVG ได้

คุณรู้จักโมดูลตอบสนองสำหรับสิ่งนี้หรือไม่? หรือคำแนะนำใด ๆ ?

ขอบคุณมากครับ

ฉันได้ลองใช้อันตราย SetInnerHTML เหมือนโพสต์นี้:

แยกวิเคราะห์ไฟล์ SVG เพื่อทำปฏิกิริยาส่วนประกอบ

แต่ฉันมีปัญหาเดียวกันในโพสต์นี้ ฉันไม่สามารถมีได้

<svg>
   <svg>
      ...
   </svg>
</svg>

แท็ก SVG เพียงแท็กเดียว