第三十八篇：element UI 附件上传控制上传类型的两种方式

第一种：直接上传附件可以在beforeUpload里做限制

1. 如果限制的类型少的话，可以直接写在beforeUpload方法里写上限制的文件类型

beforeUpload2(file) {

      //限制类型
        var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
     
        const extension = testmsg === "docx" || testmsg === "pdf"  || testmsg === "xlsx" ||testmsg === "doc" ||testmsg === "xls" || testmsg === "ppt"|| testmsg === "txt"|| testmsg === "jpg"|| testmsg === "png"|| testmsg === "jpeg";
    
        if (!extension ) {
    
          this.$message({
    
            message: "文件附件上传的格式不正确",
    
            type: "warning",
    
          });
          return extension
          
        }
        
      // console.log("上传之前判断----",file,testmsg)
      // this.deleteConfirm = false // 禁用删除确认
      // 限制上传的文件大小
      const sizeLimit = file.size / 1024 / 1024 <= 100
      if (!sizeLimit) {
        this.$message.warning('文件大小不可超过100M')
        return sizeLimit 
      }
      
    },

2. 如果限制的类型多的话，可以直接写data里

 imgType: ['jpg', 'png', 'jpeg','docx','doc','xlsx','xls','pdf'],  // 允许类型

在methods里的方法

 beforeUpload(file) {
     
      let size = file.size / 1024 / 1024 <= 100
    
      let len = file.name.split('.').length
       console.log(file,len)
      let type = this.imgType.includes(file.name.split('.')[len-1]) // 类型限制
  
      if (!size) {
        // this.$refs.upload.clearFiles();
        this.$message.error( "文件大小不超过100M");
        return false;
      }
      if (!type) {
        this.$message.warning('文件上传格式不正确')
        return false
      }
      return size && type
    },

第二种：上传完附件（导入），点击上传按钮进行附件解析，可以在 :on-change='onChange’方法

代码如下：

onChange(a, file) {
       this.loading = true
        this.fileList = file;
        
        console.log('file:',file,'a:',a,'fileList:',this.fileList)
        // return
         if (file[0].status !== "ready") return;
              if(this.fileList.length>0){
                this.loading = false
              }
              let suffName = file[0].name.substring(file[0].name.lastIndexOf('.') + 1)
              const extension = suffName === "xlsx" || suffName === "xls"  ;
              const isLt10M = file[0].size / 1024 / 1024 <= 100
              if (!extension) {
                  this.$message({
                      message: '上传文件只能是xlsx或者xls格式!',
                      type: 'warning'
                  })
                  this.fileList = []
                  return false;
              }
              if (!isLt10M) {
                  this.$message({
                      message: '上传文件大小不能超过 100MB!',
                      type: 'warning'
                  })
                  return false;
              }
              // this.fileList = fileList.slice(-1);
              // const formData = new FormData();
              // formData.append("file", file.raw);
              
    },