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);
           })
　　　　　　//打印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();
      },