Ant Design upload 文件上传 限制文件只能上传一个

上传前：

回显：可以删除

最近做了一个后台管理系统使用的是 Ant Design和vue框架搭建的

文件上传：组件: Ant Design https://1x.antdv.com/components/upload-cn/ (upload 官方文档)

功能需求：1.可以拖拽，或者点击上传文件 2.只能上传单个文件，不能上传多个文件。3.导入文件只能是 xls、xlsx格式 4.文件大小不能超过10M 5.点击取消，如果当前有文件正在上传，提示 用户，没有的话，关闭弹窗

具体思路：1.点击文件上传之前判断文件的格式/大小符合条件展示，不符合条件提示用户。2.点击确定时，判断文件是否存在，后端需要接受的参数是 formData数据，对文件进行处理。调用接 口，成功后，更新数据，不成功，提示用户。3.点击取消，如果当前有文件正在上传，提示用户，没有的话，关闭弹窗

注意事项：1.因为antd upload 上传多个文件自带remove 回调函数，但是如果fileList 只有一个文件时，需要自己调用remove 回调函数，否则，上传文件后的删除按钮失效。

              2.因为我的需求是只能上传一个文件，所以在上传文件之前，不仅要判断格式，还要限制fileList中只能有一个数据，那么也就是后传的文件，要覆盖先传的文件。

              3.因为是我自己封装的组件，需要注意父子组件传递数据的问题~~~~~

接下来上代码。

HTML部分

<template>

  <div class="dialog">

    <a-modal :visible="visible1" :confirmLoading="loading1" width="20%" :title="title1 === 'batch' ? '推广' : ''" centered

      @cancel="() => { $emit('cancelBatch',fileList) }" @ok="() => { $emit('okBatch', fileList) }">

      <div>

        <span style="margin-right: 20px; margin-bottom: 10px;display: inline-block;">导入模板</span>

        <a :href='template' @click="downLoad">下载</a>

      </div>

      <a-upload-dragger name="file" :before-upload="handleBeforeUpload" :file-list="fileList"  :remove="handleTableRemove">

        <p class="ant-upload-drag-icon">

          <a-icon type="inbox" />

        </p>

        <p class="ant-upload-text">

          点击或将文件拖拽到这里上传

        </p>

        <p class="ant-upload-hint">

          支持扩展名：.xlsx .xls

        </p>    

      </a-upload-dragger>

    </a-modal>

  </div>

</template>

Script部分

​
​
 //删除icon  

    handleTableRemove: function (file) {

      const index = this.fileList.indexOf(file);

      const newFileList = this.fileList

      newFileList.splice(index, 1);

      this.fileList = newFileList;

    },

    handleBeforeUpload: function (file, fileList) {

      this.file = file

      console.log(file, fileList);

      //判断文件大小

      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isLt10M) {

        this.$message.error(file.name + '文件大小超出限制，请修改后重新上传')

        return false

      }

      //判断上传文件格式

      let extension = file.name.split('.')[1] === 'xls';

      let extension2 = file.name.split('.')[1] === 'xlsx';

      if (!extension && !extension2) {

        this.$message.warning('导入文件只能是 xls、xlsx格式!');

        return false

      }

      this.fileList = [...this.fileList, file];

      //限制文件只能上传一个

      this.fileList = this.fileList.slice(-1);

      return false

    },

​

​

点击确认

okBatch(fileList) {

      if (fileList.length > 0) {

        // file 是上传的文件

        // 后端需要接受的参数是 formData数据，

        const form = new FormData()

        form.append('file', fileList[0])

       //点击确定后先让确定按钮loading

        this.confirmLoading1 = true

        importTask(form).then((res) => {

          if (res.code === 2000) {

           //上传成功后取消loading

            this.confirmLoading1 = false

            this.visible1 = false

            this.$message.info(res.message)

            //重置列表数据

            this.handleReset()

          } else if (res.code === 5000) {

            this.$message.error(res.message)

            this.confirmLoading1 = false

          } else {

            this.$message.error(res.message)

            this.confirmLoading1 = false

          }

        })

      } else {

        this.$message.error('您还没有上传文件！')

      }

    },

点击取消

 cancelBatch() {

        if (!this.confirmLoading1) {

          this.visible1 = false

        } else {

          this.$message.error('您正在上传文件!')

        }

    },

具体就是这样完成的。

写的比较菜，有问题欢迎在评论区提出讨论，谢谢！