鍍金池/ 問答/HTML/ 關(guān)于fetch api的文件上傳問題,為何請(qǐng)求體里什么內(nèi)容都沒有

關(guān)于fetch api的文件上傳問題,為何請(qǐng)求體里什么內(nèi)容都沒有

這是代碼,明明已經(jīng)把file賦給body,可是在瀏覽器發(fā)送請(qǐng)求時(shí)根本沒有requestpayload,后端也看不見數(shù)據(jù),請(qǐng)問這是為何?

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;
回答
編輯回答
臭榴蓮

JSON.stringify 一下? body 的結(jié)果應(yīng)該是要序列化一下

2017年5月12日 05:47
編輯回答
毀了心

this.state.file 拿到的是 event.target.files[0],這只是一個(gè) file object,而不是 FormData,既然你 fetch 的時(shí)候指明的是 multipart/form-data,那么你需要用 FormData 封裝一下你的 file object,而不是直接當(dāng)成 body 發(fā)送出去。

關(guān)于 FormData 的詳細(xì)信息,參見:https://developer.mozilla.org...

不難,你的例子也就兩三行代碼的事情。

2017年2月13日 18:43