Question

我是新手做出反应，我正在尝试将文件上传到我的节点后端，但是我已经花了一段时间才完成此操作而无法使其工作。我似乎正确地将数据发送到我的句柄函数，但之后我无法将它附加到我的formData对象。

这是我在上传html的句柄提交按钮上调用的函数。

 uploadAction(){
    var self = this;
    console.log('inside uploadAction');

    var data = new FormData();
    // var filedata = {};
    var filedata = document.querySelector('input[type="file"]').files[0];

    data.append('file', filedata);

    console.log('this is the value of data in uploadAction ', data);
    console.log('this is the value of filedata in uploadAction ', filedata)

    const config = { headers: { 'Content-Type': 'multipart/form-data' } };
     axios.post('http://localhost:5000/upload',{
       filedata: data
     },config)
       .then((response)=>{
         console.log('back again success from upload');
       })
       .catch((err)=>{
         console.error('error from upload ', err);
       });

因此，当我控制台注销数据和filedata对象时，我得到以下结果。

this is the value of data in uploadAction  FormData {}

this is the value of filedata in uploadAction  File {name: "suck.jpg"....

所以不知怎的，似乎我的filedata被正确引入，但是如何将它附加到数据对象上有一个断开。我发现这令人困惑，因为这似乎是我发现通过在线查看这些数据来附加此数据对象的方式。我认为我的axios电话是正确的，但在此之前我当然会遇到错误。

有人对我如何解决此问题有任何建议吗？有没有更简单的方法在不涉及使用querySelector的反应中执行此操作？我可能不想使用dropzone或类似的库/包，我只是想学习如何做一个简单的上传文件。

如果有人对此有任何建议，我会非常感激。我花了一些时间在这上面，我似乎是在圈子里。

编辑：根据下面第一条评论的建议，我添加了

for (var pair of data.entries()) {
  console.log(pair[0]+ ', ' + pair[1]);
}

到我的代码尝试和控制台记录我的数据值（即dataForm对象）。结果是：

file, [object File]

虽然这是真的，但它无助于解决我的问题。

Answer 1

将您的通话更改为以下方式，它应该有效（数据是您的FormData）：

axios.post('http://localhost:5000/upload',data,config)

除此之外，当您使用React而不是使用querySelector时，您可以使用文件输入中的onChange事件。仅作为一个例子：

    import React,{Component} from 'react'
    class UploadComponent extends Component {
      constructor(props, context) {
        super(props, context);
        this.state = {file: null};

        this.handleFileChange = this.handleFileChange.bind(this);
        this.sendFile = this.sendFile.bind(this);
      }

       handleFileChange(event) {
          this.setState({file:event.target.files[0]})
        }

       sendFile() {
          //In here you can get the file using this.state.file and send
        }

      render() {
       return(
            <div>
              <input className="fileInput" type="file" onChange={this.handleFileChange}/>
              <button type="submit" onClick={this.sendFile}>Upload </button>

            </div>
       )
     }
    }

无法在React中附加到文件上载的formData对象

1 个答案: