elementUI 的文件上传支持word、Excel文件，且做了文件类型和大小的限制（多文件上传）

使用elementUI 制作多文件上做了文件类型校验此段代码只支持.doc、.docx、.xls、.xlsx文件,且文件上传大小设置的200M哦，且文件上传个数为5个。

想要上传其他类型的文件只需要修改accept属性中的文件类型和beforeUpload方法中的文件类型校验即可

accept属性设置了，用户在选择文件是就只能看见此类型的文件，当然为了防止***钻用户选择所有文件类型选项，所以我们要在beforeUpload中去做文件类型的校验

beforeUpload这个方法是做什么的呢，(上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传）详情参看elementUI官网

limit属性设置文件上传个数

在做多文件上传时注意：

　　在循环追加列表时，不要使用forEach,可以使用map ，如果你偏要使用forEach ，你会发现有神奇的事情发生，呵呵，代码中有哦，你可以打开注释试试看哦。（forEach和map的区别）

样式就不给了哈，自己画就好了，废话不多说直接上代码：

　　　　1、html:

<el-upload class="upload-demo" drag action="#" multiple show-file-list accept=".doc,.docx,.xls,.xlsx"  :before-upload="beforeUpload"  ref="upload"  :on-preview="handlePreview"
        :on-remove="handleRemove"
        :file-list="fileList"
        :auto-upload="false"
        :on-change="(file,fileList)=>changeHander(file,fileList)"
        :limit="5"
        >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或点击上传</div>
      <div class="el-upload__tip uploadeMax" >支持上传后缀为：.doc、.docx、.xls、.xlsx文件,且不超过200M</div>
      <div class="el-upload__tip uploadeError" >Excel文件单元格内容避免使用"=" "+" "-" 或@开头，以免下载查看时，造成命令注入风险</div>
  </el-upload>
  <div class="group-botton">
  <el-button plain>返回</el-button>
  <el-button plain @click="submitUpload">提交</el-button><br><br>

　　2、逻辑：

beforeUpload(file){
     console.log(file)
     // 文件类型校验
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
     const extension = testmsg === "doc"|| testmsg === "docx" || testmsg === "xls"  || testmsg === "xlsx" ;
     if (!extension ) {
       this.$message({
         message: "上传文件只能是.doc、.docx、.xls、.xlsx格式!",
         type: "warning",
       });
       // 文件大小校验
       let size200M = file.size / 1024 / 1024 < 200
       if(!size200M){
         this.$message.warning('上传大小不能超过200M!')
         return false
       }
       
     }
     return extension;
   },
   // 点击提交按钮文件上传
    submitUpload() {
      if(this.fileList.length !=0){
       let formData = new FormData();
       // 错误的例子（不能使用forEach）
       // this.fileList.forEach((val,index)=>{
       //   formData.append("multipaartFiles",val.raw)
       //   console.log(val,index)
       // });
         //  formData.append("file",this.fileList[0].raw)
          this.fileList.map((item,index)=>{
            formData.append('file',item.raw);
          })<br>　　　　　　//打印formData中的数据
      // for(var [a,b]of formData.entries()){
      //   console.log(a,b,'++++++++++++++')
     //   }
      // console.log(formData,'formData');
       axios({
         url:'后端的接口地址',
         method: 'post',
         data:formData,
         headers:{
              'Content-type':'multipart/form-data'
         }
       }).then( res=>{
         console.log(res,'res')
         if(res.status==200){
           this.fileList=[];
           this.$message({
              showClose: true,
             type:'success',
             message:'上传成功'
           })
         }else{
           this.$message({
             type:"error",
             message:res.data,
             show:true
           })
         }
       })
      }else{
        this.$message({type:'error',message:'您还没有上传文件，请去上传文件吧'})
      }
      this.$refs.upload.submit();
     },