在我们使用element-ui的上传组件时，

必不可少的一步就是进行上传类型的格式校验，

本文列举了几种常见的上传类型格式：图片、ppt、视频、文档等

上传组件https://element.eleme.cn/#/zh-CN/component/upload

 <el-upload
     class="avatar-uploader"
     :headers="{Authorization:token}"
     :action="uploadUrl"
     :show-file-list="false"
     :before-upload="headUpload"
     :on-success="function(res,file){return handleAvatarSuccess(res,file,index);} ">
 </el-upload> 

 

在method里面，写入校验方法

若需要限制上传文件的大小，那就需要写个新的变量进行赋值

示例：

const isLt2M = file.size / 1024 /1024 <2;
（设置上传文件的大小）

再进行判断，当上传文件超过我们设置好的大小时，就会弹出警告语

if (!isLt2M) {
      this.$message.err('上传的图片大小不能超过2MB!')
      return false;
}

然后我们需要再判断上传文件的格式

使用indexOf(file.type)来进行判断，这个方法是判断我们上传的文件格式有没有在我们设置好的的文件类型里面，如果 == -1 ，就代表没有，就会弹出警告语

if (['application/vnd.ms-powerpoint'].indexOf(file.type) == -1) {
       this.$message.error('请上传正确的ppt格式');
       return false;
    }  

（注：return false;就是指当上传的文件格式错误时，就不会进行下一步操作）

图片：
.jpeg格式：image/jpeg
.png格式： image/png
.gif格式： image/gif

音频：
.mp3格式：audio/mpeg

视频：
.mp4格式：video/mp4
.m3u8格式：application/x-mpegURL
.mov格式：video/x-ms-wmv
.avi格式：video/x-msvideo
.flv格式：video/x-flv
.wmv格式：video/x-ms-wmv

文本：
.xls格式：application/vnd.ms-excel
.xlsx格式：application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
.doc格式：application/msword
.docx格式：application/vnd.openxmlformats-officedocument.wordprocessingml.document
.txt格式：text/plain
.pdf格式：application/pdf
.ppt格式：application/vnd.ms-powerpoint
.zip格式：application/zip
.rar格式：application/x-rar

 代码示例：

 <div class="item-name" >上传头像</div>
    <el-upload
        class="avatar-uploader"
        :headers="{Authorization:token}"
        :action="uploadUrl"
        :show-file-list="false"
        :before-upload="headUpload"
        :on-success="function(res,file){return handleAvatarSuccess(res,file,index);} ">
    <img v-if="item.headPortraitUrl" :src="item.headPortraitUrl" class="avatar">
     <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload> 

 <div class="upload-item">
      <el-upload
         :headers="{Authorization:token}"
         :action="uploadUrl"
         :on-success="handleSuccess1"
         :show-file-list="true"
         :before-upload="pptUpload"
          multiple>
         <div>
             <div class="item-meg">路演PPT
             <img v-if="form.accessoryMessagelist[0].url" src="/static/header/11.png" alt="" class="upload-icon" >
             <div v-if="form.accessoryMessagelist[0].url" class="upload-next">重新上传</div>
             <div v-else class="upload">点击上传</div>
         </div>
     </div>
</el-upload>
     <el-upload
         :headers="{Authorization:token}"
         :action="uploadUrl"
         :on-success="handleSuccess2"
         :show-file-list="true"
         :before-upload="doxrUpload">
        <div>
           <div class="item-meg">商业企划书
           <img v-if="form.accessoryMessagelist[1].url" src="/static/header/11.png" alt="" class="upload-icon" >
          <div v-if="form.accessoryMessagelist[1].url" class="upload-next">重新上传</div>
          <div v-else class="upload">点击上传</div>
       </div>
   </div>
</el-upload>
     <el-upload
         :headers="{Authorization:token}"
         :action="uploadUrl"
         :on-success="handleSuccess3"
         :show-file-list="true"
         :before-upload="videoUpload">
     <div>
        <div class="item-meg">宣传视频
        <img v-if="form.accessoryMessagelist[2].url" src="/static/header/11.png" alt="" class="upload-icon" >
        <div v-if="form.accessoryMessagelist[2].url" class="upload-next">重新上传</div>
        <div v-else class="upload">点击上传</div>
   </div>
</div>
</el-upload>
    <el-upload
          :headers="{Authorization:token}"
          :action="uploadUrl"
          :on-success="handleSuccess4"
          :show-file-list="true">
   <div>
        <div class="item-meg">其他附件
        <img v-if="form.accessoryMessagelist[3].url" src="/static/header/11.png" alt="" class="upload-icon" >
        <div v-if="form.accessoryMessagelist[3].url" class="upload-next">重新上传</div>
        <div v-else class="upload">点击上传</div>
   </div>
</div>
</el-upload>
</div>

 //校验版块
        //校验---{上传成员头像}前图片格式及大小
        AvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if(['image/jpeg','image/PNG'].indexOf(File.type) == -1) {
                this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                return false;
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M; 
        },
        //校验---{上传视频}前进行格式校验
        videoUpload(file) {
            const isLt50M = file.size / 1024 / 1024  < 50;
            if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的视频格式');
                return false;
            }
            if (!isLt50M) {
                this.$message.error('上传视频大小不能超过50MB哦!');
                return false;
            }
        },
        //校验---{上传ppt}前进行格式校验
        pptUpload(file) {
        if (['application/vnd.ms-powerpoint'].indexOf(file.type) == -1) {
                this.$message.error('请上传正确的ppt格式');
                return false;
            }  
        },
        //校验---{上传商业企划书}前进行格式校验
        doxrUpload(file) {
            if (['application/vnd.ms-powerpoint', 'application/msword','application/vnd.openxmlformats-officedocument.wordprocessingml.document','application/pdf' ].indexOf(file.type) == -1) {
                this.$message.error('请上传正确类型的文件格式');
                return false;
            } 
        },