vue elementui 上传视频(图片上传改造)
<el-form-item label="上传视频" prop="videoUrl"><el-uploadclass="avatar-uploader":action="actionUrl":show-file-list="false"...
·
<el-form-item label="上传视频" prop="videoUrl">
<el-upload
class="avatar-uploader"
:action="actionUrl"
:show-file-list="false"
:on-success="handleVideoSuccess"
:before-upload="beforeUploadVideo"
>
<video v-if="form.videoUrl1" :src="form.videoUrl1" class="avatar"></video>
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
<p v-if='load'> 上传中</p>
<P style="color:#000000">请保证视频格式正确,且不超过20M</P>
</el-upload>
</el-form-item>
// 上传视频
//上传前限制大小
beforeUploadVideo (file) {
const isLt20M = file.size / 1024 / 1024 < 30;
if (['video/mp4'].indexOf(file.type) == -1) { //'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'
this.$message.error('请上传正确的视频格式');
return false;
}
if (!isLt20M) {
this.$message.error('上传视频大小不能超过20MB哦!');
return false;
}
this.isShowUploadVideo = false;
this.load=true;
},
//上传成功回调
handleVideoSuccess (res, file) {
this.form.videoUrl1 = URL.createObjectURL(file.raw);
this.form.videoUrl = res.data;
if (res.code == 1) {
this.load = false;
} else {
this.$message.error('视频上传失败,请重新上传!');
}
},
参考饿了吗ui的图片上传
更多推荐
已为社区贡献10条内容
所有评论(0)