input上传视频文件,同一个文件二次上传无效


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(_ => {});
},

清空一般作用于你已经上传完毕以后再去清空


文章作者: 冷杨威
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 冷杨威 !
  目录
-->