vue el-upload 上传文件格式校验方法
作者：gyuhao_o
这篇文章主要介绍了vue el-upload 上传文件格式校验方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
vue el-upload 上传文件格式校验
<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));
})
},el-upload上传文件 需要在请求之前加一个校验文件内容格式请求
before-upload
data(){
return {
...
//判断是否需要做文件检查
checkFileFormat:false
}
},
beforeUpload(rawFile) {
this.loading = true;
...
检查文件格式
检查文件大小
...
if (this.checkFileFormat) {
return new Promise(async (resolve, reject) => {
const fd = new FormData()
fd.append('file', rawFile)
const res = await checkRpAttFile(fd)
this.loading = false;
if (!res.success) {
Message.error(res.message);
reject()
} else {
resolve()
}
})
} else {
return true
}
},到此这篇关于vue el-upload 上传文件格式校验的文章就介绍到这了,更多相关vue el-upload 上传文件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！