vue elementui 上传视频(图片上传改造)

          <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的图片上传

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值