使用antd的Upload组件和axios上传文件-CFANZ编程社区

一、产品需求

用户可以自由选择（选择后可以删除、重新选）一个文件，文件选择好后点击上传按钮进行上传。

二、代码实现

1.state定义

this.state = {

showModal: false,

fileList: [], //文件列表，用于控制upload组件

uploading: false //上传按钮loading显示控制

}

2.Upload组件的文件选择变化处理，上传按钮动作处理（使用axios上传文件）

handleFileChange = ({file, fileList}) => { //处理文件change，保证用户选择的文件只有一个

this.setState({

'fileList': fileList.length? [fileList[fileList.length - 1]] : []

})

}

handleUpload = () => {

if(!this.state.fileList.length) {

message.warning("请选择要上传的文件")

}

const formData = new FormData()

formData.append('file', this.state.fileList[0].originFileObj)

this.setState({

uploading: true

})

Axios.defaults.baseURL='https://jsonplaceholder.typicode.com/'

Axios({

method: 'post',

url: 'posts',

data: formData,

headers: { "Content-Type": "multipart/form-data"}

}).then(({data}) => {

message.success("上传成功")

console.log(data)

}).catch((err) =>{

console.log(err)

}).finally(() =>{

this.setState({

uploading: false

})

}

3.Upload组件使用

<Upload fileList={this.state.fileList} beforeUpload={(f, fList) => false} onChange={this.handleFileChange} >

<Button>

<CloudUploadOutlined /> 选择文件

</Button>

</Upload>

4.效果

三、注意事项

1.antd的Upload组件，在用户选择文件后会马上进行上传，可以自定义beforeUpload方法进行控制，若直接返回false就不上传“beforeUpload={(f, fList) => false}”。

2.要想post上传文件，发送的数据需要为FormData而不是json之类的，所以代码会先new一个FormData，然后把用户选择的文件添加到FormData里面去。（直接console.log打印FormData永远都是空，所以不要尝试直接打印FormData判断文件是否添加成功）

3.antd选择后的文件file是经过包装的数据，添加到formData时需要取file.originFileObj。官方案例没这么写，但用axios上传时如果直接使用file，后台会出现死活找不到数据的情况（坑了我好几个小时才找到原因）。

4.axios的请求参数中需要加入“headers: { "Content-Type": "multipart/form-data"}”，来申明传的是表单数据。