element-ui 实现文件上传(多种文件格式)

// 上传前校验
    beforeUpload(file) {
      if(file.size>1024*1024*500){
          this.$message.warning("你上传的 \“"+file.name+"\” 文件过大,请上传小于500M的文件。");
          return false;
      }
          
      if(file.name.indexOf('@')!=-1 ||file.name.indexOf('#')!=-1||file.name.indexOf('""')!=-1||file.name.indexOf('<')!=-1||file.name.indexOf('>')!=-1||file.name.indexOf('?')!=-1||file.name.indexOf('|')!=-1||file.name.indexOf('/')!=-1||file.name.indexOf(':')!=-1||file.name.indexOf('`\`')!=-1){
          this.$message.warning("你上传的 \“"+file.name+"\” 文件有特殊字符,文件名中不可存在特殊字符,请重新上传");    
          return false;
      }   

      let index = file.name.lastIndexOf(".");
      let Type = file.name.substr(index + 1, file.name.length);
      if (['pdf', 'doc', 'docx', 'xlsx', 'xls', 'ppt', 'pptx', 'zip', 'rar', 'png', 'jpg', 'jpeg'].indexOf(Type.toLowerCase()) === -1) {
        this.$message({
          type: 'warning',
          message: '请上传后缀名为pdf、doc、docx 、xlsx 、xls、 ppt 、 pptx 、zip 、rar 、png 、jpg 、jpeg的附件!'
        });
        return false;
      }
    },
 handleRemove(file, fileList) {
      this.dataForm.fileList = fileList
      },
    handleExceed(files, fileList) {
      this.$message.warning(`文件上传数量已达上限`);
    },
  // 消除文件校验
    handleChange(file, fileList) {
      if (fileList.length > 0) {
        this.dataForm.fileList = fileList
        this.$refs.dataForm.clearValidate('fileList') //清除文字校验
      }
    },
   handlePreview(res, file, fileList) {
      if (res.code == 0) {
        this.dataForm.url = res.data.url
        this.dataForm.name = res.data.name
        this.dataForm.fileId = res.data.fid
        this.dataForm.size = file.size
      }
    },
export default {
  data() {
    return {
      url: window.SITE_CONFIG["singleUploadURL"],
      headers: {Authorization: Cookies.get("access_token")},
    }
  },
},

你可能感兴趣的:(ui,vue.js,elementui)