Ant Design Vue自定义上传逻辑

最新推荐文章于 2024-09-03 18:25:53 发布

韭伍後

最新推荐文章于 2024-09-03 18:25:53 发布

阅读量620

点赞数 1

分类专栏： Ant Design vue 文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/cai_niao5623/article/details/121211853

版权

vue 同时被 2 个专栏收录

28 篇文章 3 订阅

订阅专栏

Ant Design

4 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Ant Design（Antd）中使用自定义上传逻辑处理文件上传，包括设置上传参数、处理上传响应以及更新文件列表状态。作者通过示例代码展示了如何在`customRequest`方法中构建`FormData`，并使用axios发送POST请求到指定URL。当上传成功时，文件状态更改为'done'，反之则设置为'error'，并显示相应的提示信息。

摘要由CSDN通过智能技术生成

其实用antd自带的上传逻辑也行，用自定义的上传逻辑也行。因为我总感觉有些功能用自带的上传逻辑实现不了，或者实现起来比较麻烦，这里就记录一下自定义上传逻辑吧！

<a-upload
  :action="$rootUrl+'BillAudit/BillFile/UploadFile'"
  :multiple="true"
  :file-list="fileList"
  name="files"
  :customRequest="customRequest"
  :data="{type:3}"
  @change="handleChange"
>
  <a-button> <a-icon type="upload" /> 上传附件 </a-button>
</a-upload>

customRequest方法逻辑

customRequest(data) {
  const formData = new FormData()
  formData.append('files', data.file)
  formData.append('type', 3)
  // 这里的token根据自身情况修改
  // formData.append('token', 'dfjdgfdgskdfkaslfdskf')
  this.saveFile(formData)
},
saveFile(data) {
  axios({
    method: 'post',
    url: this.$rootUrl+'BillAudit/BillFile/UploadFile',
    data: data
  }).then(res=>{
    let fileList = JSON.parse(JSON.stringify(this.fileList))
    if(res.data.code == 1) {
      fileList.map(file=>{
        file.url = res.data.data
        file.status = 'done'
      })
      this.$message.success('上传成功')
    }else {
      fileList.map(file=>{
        file.status = 'error'
      })
      this.$message.error(res.data.message)
    }
    this.fileList = fileList
  }).catch(err=>{
    let fileList = JSON.parse(JSON.stringify(this.fileList))
    fileList.map(file=>{
        file.status = 'error'
      })
      this.fileList = fileList
    this.$message.error('服务器内部错误')
  })
},

效果：