ant design for vue 上传文件

• Z时代
• 2024-01-10
• 分类：综合

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

},

以上是 ant design for vue 上传文件 的全部内容， 来源链接： utcz.com/z/375752.html