//react代码
render(){
<Button
size="small"
style={{
marginLeft: 8,
backgroundColor: 'rgb(216,45,0)',
color: '#fff',
border: 'rgb(216,45,0)',
}}
onClick={()=>this.importInputEl.click()}
>
导入
</Button>
<input
type="file"
ref={(ref)=>(this.importInputEl=ref)}
style={{display:'none'}}
onChange={this.fileImport}
></input>
}
//导入
fileImport=(info)=>{
console.log('info',info);
if(!this.importInputEl.files.length){
message.warning('请选择文件')
return ;
}
console.log('值',this.importInputEl.files[0])
const formData = new FormData();
formData.append('file',this.importInputEl.files[0]);
let params = {
token: sessionStorage.getItem('token'),
file:formData
}
console.log('params',params);
//此处调上传接口,formData应直接传入body。
}
需要注意的是,headers中的Content-Type最好不传。
POST请求时发送FormData类型的数据会将Content-Type设置multipart/form-data,完整的设置如下:
Content-Type: multipart/form-data; boundary=xxxx
但很可惜的是,我们在上传文件时并不知道formData对象里面的boundary分隔符是什么,冒然添加的话会出错的。
https://zhuanlan.zhihu.com/p/195726295
网上找到的这篇文章感觉解释的非常完整,可以收藏参考。
网友评论