ant design for vue 上传文件
1、使用customRequest
customRequest 通过覆盖默认的上传行为,可以自定义自己的上传实现 Function
定义customRequest,之前定义action行为会被覆盖,可以注释掉
<a-upload name="file" :multiple="false" @change="changeFile" :customRequest="customRequest" > <a-button type="primary"> <a-icon type="upload" />导入Excel</a-button> </a-upload>
changeFile(info) { // 上传文件 if (info.file.status !== 'uploading') { console.log(info.file, info.fileList); } if (info.file.status === 'done') { this.$message.success(`${info.file.name} 上传成功`); } else if (info.file.status === 'error') { this.$message.error(`${info.file.name} 上传失败.`); } },
customRequest(data){ // 上传提交
const formData = new FormData()
formData.append('file', data.file)
formData.append('token', "token")
this.saveFile(formData)
},
saveFile (formData) {
this.axios({
method: 'post',
url: '/api/saveFile',
headers: {
},
params:{
},
data: formData
}).then((response) => {
console.log(response)
}).catch(function (error) {
console.log(error)
})
},