参考文档
https://www.shangmayuan.com/a/eb1dd60138734a2ba47bc6f6.html
- 须要在文件上传到obs之前判断视频的分辨率 宽高比例
- 然而间接从file对象中只能拿到文件的后缀格局，体积大小;所以须要借助video来获取资源的宽高
- 通过video来获取视频的宽高 须要等到视频加载完，监听loadedmetadata事件；此处须要用到异步
- 查看 el-upload中before-upload阐明，若返回 false 或者返回 Promise 且被 reject，则进行上传；所以在before-upload的回调办法beforeAvatarUpload中返回promise,如果验证不通过则reject进行上传，并且返回reject会主动触发on-remove办法来移除文件
videoResolution：[{width: 1920, height: 1080}, {width: 544, height: 960}]// 手动革除表单校验验证信息validateField(formName, type) { this.$refs[formName].validateField(type);},<videoUpload v-model="orderForm.videoUrl" :resolution="videoResolution" :ruleData="{type:['mp4'], size: 50, limit: 1}" @input="validateField('orderForm', 'f')"></videoUpload>
videoUpload.vue <template> <div class="videoUpload"> <!-- 视频，音频上传 --> <el-upload class="upload-demo" v-loading="loading" action="#" :on-remove="handleRemove" :before-upload="beforeAvatarUpload" :limit="ruleData.limit" :on-exceed="handleExceed" :http-request="httpRequest" > <el-button size="small" plain>点击上传</el-button> <!-- <video ref="video" controls></video> --> <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> --> </el-upload> </div></template><script>import { Upload } from '@x-tech/fe-puma-lib-upload';export default { props: { value: { type: Array, }, ruleData: { type: Object, default: () => { return { type: 'mp4', size: 50, limit: 1 }; } }, resolution: { type: Array, default: ()=> { return [{ width: 1920, height: 1080 }]; } } }, data() { return { dialogImageUrl: '', dialogVisible: false, imgObjList: [], uploadImgList: this.value, loading: false, }; }, methods: { // mp3 or mp4 handleRemove(file, fileList) { console.log('handleRemove', file, fileList, this.imgObjList); this.imgObjList = this.imgObjList.filter(item => item.file.uid !== file.uid); console.log(this.imgObjList); this.$emit('input', this.getImgObsUrl(this.imgObjList)); }, handleExceed(files, fileList) { console.log(files, fileList, this.imgObjList); if (this.imgObjList.length === Number(this.ruleData.limit)) { this.$message.warning('以后限度抉择 1 个文件'); } }, beforeAvatarUpload(file) { console.log('beforeAvatarUpload',file); console.log(this.resolution); return new Promise((resolve, reject) => { // 判断size width height 是否上传符合规范 let typeLists = this.ruleData.type.map(item => item.toLowerCase()); const isVideo = !!typeLists.find(item => file.type.includes(item)); const isLt20M = file.size / 1024 / 1024 < this.ruleData.size; if (!isVideo) { this.$message.error(`上传视频只能是 ${typeLists} 格局!`); reject(); } if (!isLt20M) { this.$message.error(`上传视频大小不能超过 ${this.ruleData.size}MB!`); reject(); } let videoElement = document.createElement('video'); console.log('videoElement', videoElement); console.dir(videoElement); videoElement.addEventListener('loadedmetadata', ()=> { console.dir(videoElement); const { videoWidth, videoHeight, duration } = videoElement; console.log( videoWidth, videoHeight ); let isResolution = !!this.resolution.find(item => { return Number(videoWidth) === Number(item.width) && Number(videoHeight) === Number(item.height); }); // isResolution = Number(videoWidth) === Number(this.resolution.width) && Number(videoHeight) === Number(this.resolution.height); console.log(isResolution, 'isResolution'); if (!isResolution) { this.$message.error('上传图片分辨率不符合要求!'); reject(); } resolve(); }); let url= URL.createObjectURL(file); videoElement.src = url; // this.$refs.video.src = url; }); // return true; }, httpRequest(data) { this.loading= true; console.log('httpRequest', data, data.file); // 操作上传到obs 师 封装的upload办法调用 this.uploadExcel(data.file); }, async uploadExcel(file) { let upl; if (process.env.VUE_APP_ENV === 'prod') { upl = Upload.createProdUpload(); } else { upl = Upload.createDevUpload(); } // await返回是长期地址，须要后盾进行转存 let url = await upl.upload(file, false); this.imgObjList.push({url: url, file: file}); console.log(this.imgObjList); this.$message.success('上传胜利'); console.log(this.getImgObsUrl(this.imgObjList)); this.$emit('input', this.getImgObsUrl(this.imgObjList)); this.loading = false; }, getImgObsUrl(list) { return list.map(item => item.url); }, },};</script><style scoped lang='stylus'></style>