input上传视频文件,同一个文件二次上传无效
<el-form-item label="视频" prop="url">
<input type="file" id="inputFileVideo" ref="upload" @change="upAlividChange" style="display:none">
<el-button @click="upAlivid" :disabled="drawer2edit_upAlivid_disabled">
<span v-if="!drawer2edit_post.url">上传</span>
<span v-else>已经上传,可重新上传(修改)</span>
</el-button>
<el-progress v-if="drawer2edit_upJindu>0" :text-inside="true" :stroke-width="20" :percentage="drawer2edit_upJindu"></el-progress>
</el-form-item>
1.给input绑定ref
2.绑定一个change事件
3.当发生变化时,触发change事件,通过ref拿到DOM对象
upAlividChange() {
// 获取文件
let fileObj = document.getElementById("inputFileVideo").files[0];
console.warn("已选文件对象 \n", fileObj)
//看看是否拿到文件
if (fileObj === undefined) return
if (typeof fileObj === 'undefined') return
if (fileObj.type.indexOf("video") === -1) return this.$message.error('不是视频文件!')
let sizeMB = fileObj.size / 1024 / 1024; //视频大小(MB)
let duration = 0 //视频时长(秒)
//获取视频时长,异步非阻塞的
var audioElement = new Audio(URL.createObjectURL(fileObj));
audioElement.addEventListener("loadedmetadata", function(e) {
duration = Math.round(audioElement.duration);
});
// 是否确认上传
this.$confirm('确定上传吗?').then(_ => {
try {
if (duration === 0) return $this.$message.error('稍后重试')
if ((duration * 0.22 < sizeMB)) {
console.log('视频大小超限! 建议视频压缩码率1280kps')
}
if (this.drawer2edit_post.name === '') this.drawer2edit_post.name = fileObj.name.substring(0, fileObj.name.lastIndexOf('.'))
this.drawer2edit_post.size = Math.round(fileObj.size / 1024)
this.drawer2edit_post.sizeVal = sizeMB.toFixed(2) + 'MB'
this.drawer2edit_post.duration = duration
this.drawer2edit_post.durationVal = ly_secondsToHIS(duration)
//调用接口,开始上传
this.createUploader()
if (alivodUploader !== null) {
alivodUploader.addFile(fileObj, null, null, null, '{"Vod":{}}')
alivodUploader.startUpload()
}
//上传完毕后,一定要将其清空,不然第二次上传同样的,则上传不了,且放在最后清空,因为此时你已经上传完毕了
this.$refs['upload'].value = null;
} catch (error) {
console.error(error);
}
}).catch(_ => {});
},
清空一般作用于你已经上传完毕以后再去清空