vue el-upload 上传文件格式校验
vue 上传文件格式校验,包括视频/图片大小、后缀名、时长等校验
·
<el-upload
class="avatar-uploader"
action="#"
:show-file-list="false"
:before-upload="beforeAvatarUpload">
<i class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
1、文件大小验证
file.size 以字节Byte为单位(Blob类型),1MB=1024KB,1KB=1024Btye
<script>
export default {
methods: {
beforeAvatarUpload(file) {
const isLt2M = file.size / 1024 / 1024 < 2; // 小于2M
if ( !isLt2M ) {
console.log('文件大小超出2M');
}
}
}
}
</script>
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-upload上传的file文件;得到的结果单位为秒,保留两位小数。
// 获取视频文件时长
getVideoTime(file){
return new Promise((resolve, reject) => {
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));
})
},
更多推荐
已为社区贡献2条内容
所有评论(0)