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>

　　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();

     },