vue el-upload 上传文件格式校验

本文介绍: vue 上传文件格式校验，包括视频/图片大小、后缀名、时长等校验

&lt;el-upload
  class="avatar-uploader"
  action="#"
  :show-file-list="false"
  :before-upload="beforeAvatarUpload"&gt;
  &lt;i class="el-icon-plus avatar-uploader-icon"&gt;&lt;/i&gt;
&lt;/el-upload&gt;

1、文件 大小 验证

file.size 以字节Byt e为单位（Blo b 类型）,1MB=1024KB，1KB=1024Btye

<script&gt;
  export default {
    methods: {
      beforeAvatarUpload(file) {
        const isLt2M = file.size / 1024 / 1024 < 2;  // 小于2M
        if ( !isLt2M ) {
            console.log('文件大小超出2M');
        }
      }
    }
  }
</script&gt;

2、文件格式 验证

文件名后缀是支持大小写的，如.mp4 .Mp4 .mP4 .MP4都是可以正常播放的，所以我们校验的时候通过先将其转成小写，再进行校验。（图片同理）

file.name.split('.')[1].toLowerCase() != 'mp4'; // 视频不是.mp4格式的

let formatArr = ['image/png','image/jpg','image/jpeg'];
const isPic = ( formatArr.indexOf(file.type.toLowerCase()) != -1 );  // 是否为图片

3、视频时长验证

函数可以直接使用，file为el-up load 上传的file文件；得到的结果单位为秒，保留两位小数。

// 获取视频文件时长
getVideoTime(file){
    return new Promise((resolve, reject) =&gt; {
        let url = URL.createObjectURL(file);
        let audioElement = new Audio(url);
        audioElement.addEventListener('loadedmetadata',function(_event){
            const time = Math.round(audioElement.duration * 100) / 100;   // 时长为秒，保留两位小数
            resolve(time);
        });
        audioElement.addEventListener('error', () => resolve(0));
    })
},