element-ui 实现文件上传（多种文件格式）

<template>
  <div>
    <el-form :model="dataForm" ref="dataForm" label-width="100px" label-position="left" :rules="rules">
          <el-form-item label="文件：" prop='fileList'>
            <el-upload class="upload-demo"
                       ref="upload"
                       drag
                       :data="{ type: 'other' }"
                       :limit="5"
                       accept=" .xlsx, .pdf, .doc, .docx, .xls, .rar, .zip, .png , .jpg, .jepg"
                       :action="url"
                       :headers="headers"
                       :file-list="dataForm.fileList"
                       :auto-upload="true"
                       :before-upload="beforeUpload"
                       :on-remove="handleRemove"
                       :on-exceed="handleExceed"
                       :on-change="handleChange"
                       :on-success="handlePreview">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">支持上传格式：pdf、doc、docx 、xlsx 、xls、 ppt 、pptx 、zip 、rar 、png 、jpg
                、jpeg一次最多上传5个文件
              </div>
            </el-upload>
          </el-form-item>
    </el-form>
  </div>
</template>

// 上传前校验
    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")},
    }
  },
},