Ant Design Vue 中a-upload组件通过axios实现文件列表上传与更新回显的前后端处理方案

前言

在企业应用的快速开发中，我们需要尽快的完成一些功能。如果您使用了Ant Design Vue，在进行表单的文件上传相关功能开发的时候，您肯定迫不及待地需要找到一篇包治百病的文章，正是如此，才有了该文的诞生，愿以此文解君忧。

方案设计

前端方案设计

• 重写a-upload的文件上传方式，使用axios来进行上传
• 选择一个文件后立即进行上传，前端记录上传成功后的name和uid，并构建一个File实例，用于a-upload组件的已上传文件列表的回显
• 提交前让文件列表转化为要后端要处理的uid列表

后端方案设计

• 提供一个统一上传单个文件的接口，每个文件选择后自动上传都将上传到该接口，并写入到数据库的file数据表中
• 对表单数据新建完成后，对上传的文件列表进行当前实体记录的绑定
• 对表单数据更新完成后，检测该实体记录的所有文件列表，对没有在该列表中的uid的文件列表进行删除，然后对该列表中所有的uid文件记录进行当前实体记录的绑定

新建与更新的一致性处理方案

• 因为更新表单在读取旧数据后，需要与新选择文件进行同样的格式化处理，这里的处理流程一样，进行回显的数据是一样的，提交表单也都是提交file表中已经存在的uid列表，所以这里的数据结构是一致的，处理起来将会更加简洁明了。

让代码说话

为了让各位看官老爷们便于理解，直接上代码，希望能将整件事说明白。

构建表单

  
<a-form :form="form">  
    <a-form-item label="名称" style="margin-bottom: 0;">  
        <a-input v-decorator="['name', {rules: [{required: true, message: '请输入名称！'}]}]" />  
    </a-form-item>
    <a-form-item>  
      <a-upload  
      :multiple="true"  
      :fileList="downloadFiles"  
      :remove="handleDownloadFileRemove"  
      :customRequest="downloadFilesCustomRequest"  
      >  
        <a-button class="upload-btn"> <a-icon type="upload" > 相关下载 </a-button>  
      </a-upload>  
    </a-form-item>
</a-form>

编写js代码

• 请求后端接口的token、header以及baseUrl等我已默认您已经在axios的统一设置中已经配置好了
• 为了简化axios相关操作，我们将axios进行了如下封装（您也可以按此完全使用axios来直接对数据进行提交等）：

const dibootApi = {
   
    get (url, params) {
     
      return axios.get(url, {
     
        params  
      })  
    },  
    upload(url, formData) {
     
      return service({
     
        url,  
        method: 'POST',  
        data: formData  
      })  
    }
}
export default dibootApi

• 我们默认为demo实体中需要上传一些文件列表

export default {
   
    name: 'demoForm',
    data () {
   
        title: '新建',                            // 该表单的功能标题
        form: this.$form.createForm(this),        // 表单数据初始化，没什么好说的
        model: {
   },                                // 如果是更新表单，之前的数据放到这里，来做数据初始化显示之用
        downloadFiles: []                         // 已经上传的文件列表
    },
    methods: {
   
        // 初始打开的表单时的处理（如果是更新表单，这里首先需要读取出相关数据）
        async open (id) {
     
          if (id === undefined) {
     
            // 没有id数据则认为是新建  
            this.model = {
   }  
            this.