07-手动上传文件-(Content-Type)

2022-09-06  本文已影响0人  零涂
//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
网上找到的这篇文章感觉解释的非常完整,可以收藏参考。

上一篇 下一篇

猜你喜欢

热点阅读