关于fetch api的文件上传问题,为何请求体里什么内容都没有

Question

这是代码，明明已经把file赋给body，可是在浏览器发送请求时根本没有requestpayload，后端也看不见数据，请问这是为何？

import React, { Component } from 'react';


let a=1;
class Upload extends Component{

    state = {
        file:null
    }

    handleFileClick(e) {
        this.setState({file: e.target.files[0]});
      }

      handleSubmitClick(e) {
          console.log(this.state.file);
        fetch("http://localhost:8080//upload.do",{
                    method: 'POST',
                    headers:{
                        'Access-Control-Allow-Origin':'*',
                        'Content-Type': 'multipart/form-data;boundary=56423498738365'
                    },
                    mode: 'cors',
                    body: this.state.file
                });
      }

    render(){
        return (
            <div>
                <input type="file" onChange={this.handleFileClick.bind(this)}/>
                <input type="button" value="123" onClick={this.handleSubmitClick.bind(this)}/>
            </div>
        );
    }
}
export default Upload;

Answer 1

this.state.file 拿到的是 event.target.files[0]，这只是一个 file object，而不是 FormData，既然你 fetch 的时候指明的是 multipart/form-data，那么你需要用 FormData 封装一下你的 file object，而不是直接当成 body 发送出去。

关于 FormData 的详细信息，参见：https://developer.mozilla.org...

不难，你的例子也就两三行代码的事情。

Answer 2

JSON.stringify 一下？ body 的结果应该是要序列化一下