javascript - 如何将 datauri 元素转换为可以通过 React 上传的文件？

Question

我正在通过 React webapp 将文件发送到 api 端点，目前作为模型一直在使用文件上传。此后我添加了相机功能，因为我计划让用户能够拍照并上传该照片。我正在使用 react-html5-camera-photo 来捕获 datauri 元素。如何将其转换为文件以上传到端点？或者我处理这个问题的方式不正确？

文件上传:

handleUploadImage=()=> {
  console.log(this.state.selectedFile)
  const data = new FormData();
  data.append('file', this.state.selectedFile);
  data.append('filename', this.state.selectedFile.name);
  fetch('http://localhost:5000/upload', {
    method: 'POST',
    body: data,
  })
    .then((response) => {
    response.json()
    .then((response) => {
      //this.setState({ imageURL: `http://localhost:5000/${body.file}` });
      console.log(response.text)
      this.setState({ text: response.text})
      this.getPlate()
    })
  });
}

相机代码:

  startCamera = () => {
    console.log('starting camera')
    if(!this.state.cameraLoad) {
      this.setState({ cameraLoad: true, camIconData: collapse}) ;  
    } else {
      this.setState({ cameraLoad: false, camIconData: expand}) ;
    }
  } 

   onTakePhoto = (dataUri) => {
     // Do stuff with the dataUri photo...
     console.log('photo taken');
     this.setState({ camColor: 'green', dataUri : dataUri })
   }

 // will upload photo after user confirms to upload
  uploadPhoto = e => {
    console.log('uploading photo')
    console.log(this.state.dataUri)
    this.setState({ camColor: 'green', dataUri: null, cameraLoad: false });  
  };

dataUri 元素看起来像:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABQAAAALQCAYAAADPfd1WAAAgAElEQVR4XlS9h5Nk63HdmeVdV5vpmXnzDAEQBAiKwlJmIzZiQ/u/72qDWongkpREQFjRgHh2/LQp7zd+52TeavSLfjPTXXXr3s/kl3n

Answer 1

这是完整的示例。请编写一个CameraComponent，如下所示，您将在其中找到submitPhoto()函数，该函数负责将图像上传到api。

import React, {useState} from 'react';
import Camera from 'react-html5-camera-photo';
import 'react-html5-camera-photo/build/css/index.css';
import ImagePreview from "./ImagePreview";
import axios from 'axios';

function CameraComponent(props) {
    const [dataUri, setDataUri] = useState('');
    const isFullscreen = false;
    const cameraRef = React.useRef();

    function handleTakePhoto(dataUri) {
        console.log('takePhoto');
    }

    function handleTakePhotoAnimationDone(dataUri) {
        console.log(dataUri, 'takePhoto');
        setDataUri(dataUri);
    }

    function handleCameraError(error) {
        console.log('handleCameraError', error);
    }

    function handleCameraStart(stream) {
        console.log('handleCameraStart');
    }

    function handleCameraStop() {
        console.log('handleCameraStop');
    }

    function submitPhoto() {
        const url = "http://localhost:3000/api/img";
        const request = axios.post(url, {
            method: "POST",
            headers: {
                Accept: "application/json",
                "Content-Type": "application/json"
            },
            body: JSON.stringify({
                img: dataUri
            })
        }).catch(error => {
            console.warn(error);
        });
    }

    return (
        <div>
            <button onClick={submitPhoto}>Upload</button>
            {(dataUri)
                ? <ImagePreview dataUri={dataUri}
                                isFullscreen={isFullscreen}
                /> :
                <Camera ref={cameraRef}
                        onTakePhoto={(dataUri) => {
                            handleTakePhoto(dataUri);
                        }}
                        onTakePhotoAnimationDone={(dataUri) => {
                            handleTakePhotoAnimationDone(dataUri);
                        }}
                        onCameraError={(error) => {
                            handleCameraError(error);
                        }}
                        onCameraStart={(stream) => {
                            handleCameraStart(stream);
                        }}
                        onCameraStop={() => {
                            handleCameraStop();
                        }}
                />
            }
        </div>
    );
}

export default CameraComponent;

这是另一个组件 ImagePreview，它将预览图像

import React from 'react';
import PropTypes from 'prop-types';
import './styles/imagePreview.css';

export const ImagePreview = ({ dataUri, isFullscreen }) => {
  let classNameFullscreen = isFullscreen ? 'demo-image-preview-fullscreen' : '';

  return (
    <div className={'demo-image-preview ' + classNameFullscreen}>
      <img src={dataUri} />
    </div>
  );
};

ImagePreview.propTypes = {
  dataUri: PropTypes.string,
  isFullscreen: PropTypes.bool
};

export default ImagePreview;