上传成功后,下面的滚动条和文件名消失
<el-form-item label="上传视频" prop="videoPath" :required="videoTo">
<el-upload
ref="video"
class="upload-demo"
v-model="form.videoPath"
drag
action="/api/EToolFile"
:multiple="false"
:before-upload="beforeUploadVideo"
:http-request="UploadVideo"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">
将文件拖到此处,或<em>点击上传</em>
</div>
</el-upload>
//进度条
<el-progress
v-show="progressFlag"
:percentage="loadProgress"
></el-progress>
</el-form-item>
return {
progressFlag: false,
loadProgress: 0,
}
method中的方法
//视频上传
UploadVideo(params) {
this.form.videoPath = URL.createObjectURL(params.file);
this.progressFlag = true;
this.loadProgress = 0;
const interval = setInterval(() => {
if (this.loadProgress >= 99) {
clearInterval(interval);
return;
}
this.loadProgress += 1;
}, 20);
upload("/api/EToolFile", params.file).then((res) => {
console.log(res);
this.form.videoPath = res.data.data.name;
this.progressFlag = false;
this.loadProgress = 100;
this.$message({
type: "success",
message: "上传成功!",
});
// 清空上传列表
this.$refs.video.clearFiles();
});
},
beforeUploadVideo(file) {
const isLt30M = file.size / 1024 / 1024 < 30;
if (
[
"video/mp4",
"video/ogg",
"video/flv",
"video/avi",
"video/wmv",
"video/rmvb",
].indexOf(file.type) == -1
) {
this.$message.error("请上传正确的视频格式");
return false;
}
if (!isLt30M) {
this.$message.error("上传视频大小不能超过30MB哦!");
return false;
}
},