Bereaksi Unggah file SVG dan buat komponen dengan

Saya ingin menampilkan SVG setelah mengunggahnya dengan file input. Tapi saya tidak ingin itu ditampilkan dengan tag gambar dan base64 tetapi dengan tag svg.

Saya telah membuat file masukan untuk diunggah seperti itu:

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;

itu berfungsi dengan baik. Dan di induk komponen ini saya mendapatkan informasi svg:

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

tapi saya tidak tahu cara menampilkannya dengan tag SVG. Saya mencoba memecahkan kode base64 seperti itu:

    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} />

di mana Test adalah komponen sederhana yang mengurai dan merender 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;

Ini menunjukkan SVG yang tepat di browser. Tapi react-draggable tidak berfungsi setelahnya. Dan jika saya mengubah SVG yang diunggah oleh komponen reaksi SVG (tidak diunggah tetapi dalam kode) tidak apa-apa.

Tapi saya ingin bisa melakukannya dengan SVG yang diunggah.

Apakah Anda tahu modul reaksi untuk ini? atau ada saran?

Terima kasih banyak.

saya telah mencoba menggunakan berbahayaSetInnerHTML seperti posting ini:

Parsing file SVG ke komponen React

tetapi saya memiliki masalah yang sama pada posting ini, saya tidak dapat melakukannya

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

hanya satu tag SVG.