使用element UI el-upload元件實現視訊檔案上傳及上傳進度顯示方法總結
實現效果：
上傳中：
上傳完成：
程式碼：
<el-form-item label="視訊上傳" prop="Video">
<!-- action必選引數, 上傳的地址 -->
<el-upload class="avatar-uploader el-upload--text" :action="uploadUrl" :show-file-list="false" :on-success="handleVideoSuccess" :before-upload="beforeUploadVideo" :on-progress="uploadVideoProcess">
<video v-if="videoForm.Video !='' && videoFlag == false" :src="videoForm.Video" class="avatar" controls="controls">您的瀏覽器不支援視訊播放</video>
<i v-else-if="videoForm.Video =='' && videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
</el-upload>
<P class="text">請保證視訊格式正確，且不超過10M</P>
</el-form-item>
on-success：上傳成功
before-upload：驗證
on-progress：上傳進度
驗證方法：驗證視訊格式和視訊大小
beforeUploadVideo(file) {
const isLt10M = file.size / 1024 / 1024 < 10;
if (['video/mp4', 'video/ogg', 'video/flv','video/avi','video/wmv','video/rmvb'].indexOf(file.type) == -1) {
this.$message.error('請上傳正確的視訊格式');
return false;
}
if (!isLt10M) {
this.$message.error('上傳視訊大小不能超過10MB哦!');
return false;
}
},
上傳進度顯示：
uploadVideoProcess(event, file, fileList){
this.videoFlag = true;
this.videoUploadPercent = file.percentage.toFixed(0);
},
file.percentage獲取檔案上傳進度
進度顯示：
<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
上傳成功：
handleVideoSuccess(res, file) { //獲取上傳圖片地址
this.videoFlag = false;
this.videoUploadPercent = 0;
if(res.status == 200){
this.videoForm.videoUploadId = res.data.uploadId;
this.videoForm.Video = res.data.uploadUrl;
}else{
this.$message.error('視訊上傳失敗，請重新上傳！');
}
},
視訊顯示是在上傳成功後後臺返回視訊地址，直接顯示在頁面中的。