Javascript 在react中上载和读取文件

我正试图上传一个带有React的文件并查看其内容，但它给我的是

C:\fakepath\

。我知道为什么它会给出

fakepath

，但是在react中上传和读取文件内容的正确方法是什么

<input type="file"
      name="myFile"
      onChange={this.handleChange} />

handleChange: function(e) {
        switch (e.target.name) {
        case 'myFile':
            const data = new FormData();
            data.append('file', e.target.value);
            console.log(data);
        default:
            console.error('Error in handleChange()'); break;
        }
    },

handleChange:函数（e）{
开关（如target.name）{
案例“myFile”：
const data=新表单数据（）；
data.append（'file'，e.target.value）；
控制台日志（数据）；
违约：
console.error（'error in handleChange（）'）；break；
}
},

要获取要使用的文件信息，请使用所选文件数组

event.target.files

。其中每一个都可以通过对象轻松上传。例如，请参见下面的代码段：

类文件输入扩展了React.Component{
建造师（道具）{
超级（道具）
this.uploadFile=this.uploadFile.bind（this）；
}
上载文件（事件）{
让file=event.target.files[0]；
console.log（文件）；
如果（文件）{
let data=new FormData（）；
data.append（'file'，file）；
//axios.post（'/files'，data）。。。
}
}
render（）{
返回
}
}
ReactDOM.render（，document.getElementById（'root'））

您使用过dropzone吗？
看到这个了吗

容易实现，上传和返回网址，如果这很重要

onDrop: acceptedFiles => {
    const req = request.post('/upload');
    acceptedFiles.forEach(file => {
        req.attach(file.name, file);
    });
    req.end(callback);
}

您可以使用，它为您提供开箱即用的文件预览（包括图像缩略图），还可以为您处理上载

在
onChangeStatus
道具中，您可以对文件的
meta
数据和
文件本身做出反应，这意味着您可以在上传文件之前或之后执行任何类型的客户端处理

import'react dropzone uploader/dist/styles.css'
从“react Dropzone uploader”导入Dropzone
常量上载程序=（）=>{
返回(
（{url:'https://httpbin.org/post'}）}//指定文件的上载参数和url
onChangeStatus={（{meta，file}，status）=>{console.log（status，meta，file）}
onSubmit={（files）=>{console.log（files.map（f=>f.meta））}
accept=“image/*，audio/*，video/*”
/>
)
}

上载有进度指示器，可以取消或重新启动。用户界面是完全可定制的

完全公开：我编写了这个库。
尝试在后端使用Multer和gridfs存储，并将文件ID与mongoose模式一起存储

// Create a storage object with a given configuration
const storage = require('multer-gridfs-storage')({
  url: 'MONGOP DB ATLAS URL'
});

// Set multer storage engine to the newly created object
const upload = multer({ storage }).single('file');

router.post('/', upload, (req, res) => {

  const newreminder = new Reminders({
    category: req.body.category,
    name:req.body.name,
    type: req.body.type,
    exdate: req.body.exdate,
    location:req.body.location,
    notes:req.body.notes,
    fileID: req.file.id
  });
  newreminder.save(function(err){
    if(err){
      console.log(err);
      return;
    }

    res.json({ "success": "true"});
  });

});

然后在前端正常处理（使用Axios），上传整个文件，并以正常方式获取所有信息：

onSubmit = (e) => {
  e.preventDefault;
  const formData = new FormData();
  formData.append({ [e.target.name]: e.target.value })
  formData.append('file', e.target.files[0]);

  axios.post({
    method:'POST',
    url:'EXPRESS JS POST REQUEST PATH',
    data: formData,
    config:{ headers: {'Content-Type':'multipart/form-data, boundary=${form._boundary}'}}
  })
  .then(res => console.log(res))
  .catch(err => console.log('Error', err))
}


您可以使用FileReader onload方法读取文件数据，然后将其发送到服务器

您可以在React中找到使用文件读取器处理文件的有用方法
上传文件后如何读取文件数据@炼狱般的你们会处理那个服务器端，我不知道你们正在上传什么，也不知道你们在服务器端有什么代码。如果您需要有关服务器端代码的帮助，您应该创建一个新问题。@Purgatory该问题显然是关于在提交文件之前在客户端处理文件内容的。@artshpakov感谢您的态度，但您可以清楚地看到，我在回答的底部提到了它。您将如何管理onChange方法？为了能够将数据提交到X数据库，您不需要将值存储在state中吗？您的示例只使用控制台日志，文档中的示例也是如此。目前尚不清楚工作是否在幕后进行，或者是否需要对完整的上传和onChange功能进行编码。如果上传和更改功能需要编码，那么这并不能真正回答这个问题，可以通过提供这些功能中的代码来回答这个问题。