Reactjs 通过使用表单数据将base64数据uri转换为文件对象，从本地目录保存图像（不上载）

我正在尝试通过在reactjs中导入将本地目录中的图像保存到数据库中（不上载）。首先，我通过导入定义图像。然后，我将路径保存在状态中，但当我尝试保存显示的图像时失败。这是我从目录导入的文件格式，显示在状态中：

 data:image/png;base64,iVBORw0KGgoAAAANS==........

我想将其转换为文件对象，如下所示：

{name: "Copy of 8.jpg", 
    lastModified: 1586437734537,
    lastModifiedDate: Thu Apr 09 2020 19:08:54 GMT+0600 (Bangladesh Standard Time),
    webkitRelativePath: "", 
    size: 1172382, …}

这是我迄今为止为保存本地映像所做的工作：

import React, { Component } from "react";
import axios from "axios";
import service from "../../../static/images/projectImage/service.png";//this is the image



    class ReactImage extends Component {
        constructor(props) {
            super(props);
    
            this.state = {
                apiUrl: config.publicRuntimeConfig.publicRuntimeConfigValue.apiUrl,
                parentList: [],
                file: service,//imported imagestored in state
    
            };
            
    
    
        }
   
        saveRequirementImage = () => {
            var data = new FormData();
            data.append("fileToUpload[]", this.state.file);
            axios.post(this.state.apiUrl + '/api/v1/visitImageRequirementInfo/save', data, config)
                .then((response) => {
                    console.log("response", response);
                    if (response.data.status === "success") {
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        };
    
    
        render() {
    
            return (
                <div className="app">
                    <input id="files" type="file"  type="file"/>
                    <button type="button">Submit</button>
                </div>
            );
        }
    }
    export default ReactImage;

import React，{Component}来自“React”；
从“axios”导入axios；
从“../../static/images/projectmage/service.png”导入服务//这就是图像
类ReactImage扩展组件{
建造师（道具）{
超级（道具）；
此.state={
APIRL:config.publicRuntimeConfig.publicRuntimeConfigValue.apirl，
父列表：[]，
文件：服务，//导入的图像存储在状态
};
}
saveRequirementImage=（）=>{
var data=new FormData（）；
data.append（“fileToUpload[]”，this.state.file）；
axios.post（this.state.apirl+'/api/v1/visitImageRequirementInfo/save'，数据，配置）
。然后（（响应）=>{
控制台日志（“响应”，响应）；
如果（response.data.status==“success”）{
}
})
.catch（（错误）=>{
控制台日志（err）；
});
};
render（）{
返回(
提交
);
}
}
导出默认图像；

---

如何将base64图像格式转换为文件对象？

React无法直接访问您的文件系统。尝试此解决方案下载图像文件

handleChange(event) {
  this.setState({
    file:event.target.files[0]
  }, () => {
    this.downloadFile(this.state.file);
  });
}

downloadFile = (file) => {

  const blob = new Blob(
    [ file ],
    { type: 'image/jpeg' }
  );
  const href = await URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = href;
  link.download = 'your file name' + '.jpeg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

---

React无法直接访问您的文件系统。尝试此解决方案下载图像文件

handleChange(event) {
  this.setState({
    file:event.target.files[0]
  }, () => {
    this.downloadFile(this.state.file);
  });
}

downloadFile = (file) => {

  const blob = new Blob(
    [ file ],
    { type: 'image/jpeg' }
  );
  const href = await URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = href;
  link.download = 'your file name' + '.jpeg';
  document.body.appendChild(link);
  link.click();
  document.body.removeChild(link);
}

---

我不想下载图像。我想将其保存到数据库中。可能是我的标题有误导性。如果我不想上载任何图像，该怎么办。如果我只是设置图像的目录，则在文件状态下。我不想下载图像。我想将其保存到数据库中。可能是我的标题有误导性。如果我不想上载任何图像，该怎么办。在文件状态，如果我只是设置图像的目录。