在反应中使用 FormData() 不断返回 null

Question

我正在构建一个 React 应用程序，其中有一部分我应该设置个人资料图片，但每次我拨打 api 时，我都会收到一个错误，我没有填写其中一个字段发布 api 以返回成功响应。

这是我的 jsx

<form>
    <input type="file" name="file" onChange={(e) => this.handleFile(e)}></input>
    <button type="button" onClick={(e) => this.handleUpload(e)} >send</button>
</form>

这是我用来处理这些的代码

state = {
   file: null
};
handleFile(e) {
   console.log(e.target.files, "ssss");
    console.log(e.target.files[0], "ssss");
    let file = e.target.files

    this.setState({ file: e })
}
handleUpload(e) {
  let file = this.state.file
  let fromdata = new FormData();
  fromdata.append('image', file);
  fromdata.append('name', "filedata");
  const headers = {
        Authorization': localStorage.getItem('api_key'),

  }
  const user = {
       filedata: fromdata,
       type: 1,
  };
  axios.post(`sth sth`, user, {
       headers: headers
  })
       .then(res => {
           console.log(res);
           console.log(res.data);
        })
}

所以基本上服务器需要type 和filedata 但每次我发送api 请求它都会不断返回我

filedata: ["The filedata field is required."]

我似乎找不到问题所在。

Answer 1

正确处理您的 handleFile 函数并向您的 api 请求添加 Content-Type/Accept 标头，您的最终代码应如下所示。在您的 api console.log (req.file) 上，您应该会看到您的文件现在已成功到达服务器，或者如果您可以提供一些服务器代码，我可以提供进一步的帮助。

import React from 'react';
import axios from 'axios';

export class Test extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            file : null
        }
        this.handleFile = this.handleFile.bind(this)
        this.handleUpload = this.handleUpload.bind(this)
    }

    handleFile(e) {
        let file = e.target.files[0]
        this.setState({ file })
    }

    handleUpload (e) {
        e.preventDefault();
        let file = this.state.file
        let fromdata = new FormData();
        fromdata.append('image', file);
        const headers = {
                'Authorization': localStorage.getItem('api_key'),
                'Content-Type' : 'multipart/form-data'
        }
        const user = {
            filedata: fromdata,
            type: 1,
        };
        axios.post(`sth sth`, user, {
            headers
        })
       .then(res => {
           console.log(res);
           console.log(res.data);
        })
    }


    render() {
        return (
            <form onSubmit={this.handleUpload}>
                <label>File</label><br/>
                    <input type='file' onChange={this.handleFile}/>
                <button>Send File!</button>
            </form>
        )
    }
}

Answer 2

假设您要上传单个文件，我看到的问题是将文件设置为状态。您将整个响应置于此语句中的状态：this.setState({ file: e }) 将其更改为 this.setState({ file: e.target.files[0] })。

基本上，您接收的不仅仅是文件，您还接收用户使用选择文件输入按钮上传文件时传入的整个响应和其他数据，因此无法很好地读取内容.

我的做法：我会将文件放入全局 var 而不是状态。

通常在这种情况下，它的功能没有完成但主线程继续运行，这就是为什么变量状态为空或旧值的原因。

var file, fromdata;

handleFile(e) {
    file = e.target.files[0];
}
handleUpload(e) {
    fromdata = new FormData(); //make sure this statement completes before moving any further
    fromdata.append('image', file);
    fromdata.append('name', "filedata");
    const headers = {
        Authorization': localStorage.getItem('api_key'),

    }
    user = {
        filedata: fromdata,
        type: 1,
    };
    axios.post(`sth sth`, user, {
        headers: headers
    })
        .then(res => {
            console.log(res);
            console.log(res.data);
        })
}