Element UI 上传文件Upload 限制上传文件格式

Posted 2021-09-01 萌萌的DDD

          <el-upload
            class="upload-demo"
            :limit="3"
            :before-upload="beforeUpload"
            :action="fileUpload"
            :on-exceed="handleExceed"
            :on-success="handleSuccessZl"
          >
            <el-button icon="el-icon-upload" size="small" type="primary">点击上传</el-button>

如果要在上传前判断文件类型，并且进行上传拦截，需要通过before-upload钩子函数去进行拦截

 文档中规定，通过返回的布尔值或者promise的reject可以截停上传

beforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension = testmsg === 'xls'
      const extension2 = testmsg === 'xlsx'
      const extension3 = testmsg === 'doc'
      const extension4 = testmsg === 'pdf'
      if (!extension && !extension2 && !extension3 && !extension4) {
        this.$message({
          message: '上传文件只能是pdf、doc、xls、xlsx格式!',
          type: 'warning'
        })
      }
      return extension || extension2 || extension3 || extension4
    },

通过截取文件的后缀名，根据自己定义的变量进行匹配，若不符合责返回false截停上传