第十六篇 难点突破之 Vue 中使用 ElementUi el-upload 进行手动上传文件 限制上传文件类型 大小 同名等进行限制

个人在做文件上传功能的时候，踩过不少的坑，特在此记录下，方便后续的查阅，也帮助有需要的个人在开发中，需要做文件的上传，自己踩过不少的坑，于是决定在此记录以下，方便自己后续查看，也方便有需要的朋友查阅。

实现的功能有：文件上传类型限制、文件大小限制、文件总大小限制、文件同名限制、文件下载、文件删除 和 文件预览图。

效果图如下：

1. 文件类型限制

2. 文件大小限制

3. 文件同名限制

4. 文件总大小限制

5. 文件下载和删除

6. 文件预览图就是上述的框体图片，这个是自己引入的图片，自己会放在附件处。有需要的可到  阿里巴巴icon图库官网 进行下载自己喜欢的图片。

7. 点击保存上传文件等信息

下面来说下大致的实现过程，让大家更明确一些。

前提：要手动上传文件，需要将 :auto-upload="false" 加上，指的是不要自动上传。自己书写下 :http-request="handleUplodFile" 方法，覆盖 action 即可。

自己定义了两个变量：

 fileList:[] : 是用于展示选择的文件列表的，如上面的一个个的框体。

realUploadFile:[] :这个是真实的要上传给后端的文件，该数组的类型是 二进制的Object 类型

下面直接说下关键的代码

1. 文件上传的时候，触发 on-change 事件，在这可做一些判断。文件类型限制、文件大小限制、文件同名限制和文件总大小限制等等。

    // 文件勾选触发
    changUpload(file) {
      const { uid, name, size } = file
      //   文件类型限制
      const fileTypeFlag = /^.png|.jpg|.jpeg|.gif|.txt|.doc|.docx|.xls|.xlsx|.pdf|.zip|.7z|.rar$/.test(
        name.substring(name.lastIndexOf('.')).toLowerCase()
      )
      if (!fileTypeFlag) {
        this.$message.warning(
          '文件类型只能是.png|.jpg|.jpeg|.gif|.doc|.docx|.xls|.xlsx|.pdf|.zip|.7z|.rar|.txt'
        )
        const selectFileList = this.modelForm.fileList.filter(item => {
          return item.uid != uid
        })
        this.modelForm.fileList = selectFileList
        return
      }
      //   文件大小进行校验
      if (size > 1024 * 1024 * 100) {
        this.$message.warning('文件大小不能超过100Mb')
        const selectFileList = this.modelForm.fileList.filter(item => {
          return item.uid != uid
        })
        this.modelForm.fileList = selectFileList
        return
      }
      //   文件总大小限制
      const totalSize = this.modelForm.fileList.reduce(
        (total, item) => total + item.size,
        0
      )
      if (totalSize + size > 1024 * 1024 * 100) {
        this.$message.warning('总文件大小不能超过100Mb')
        const selectFileList = this.modelForm.fileList.filter(item => {
          return item.uid != uid
        })
        this.modelForm.fileList = selectFileList
        return
      }
      //   文件重名限制
      const findCommonNameIndex = this.modelF