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)
})

},

  

posted @ 2019-10-16 09:25  甜甜宝宝  阅读(13633)  评论(0编辑  收藏  举报