vue+elementui上传视频并回显-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue+elementui上传视频并回显。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

之前上传视频我做的东西的话是没有办法看到视频的内容的，然后我们组长就说这个业务是不可以的，因为用户的话过了很久是会忘记自己这个视频是什么内容的，所以我们做一个上传视频的功能的话，是一定要一个回显，让用户可以看得到视频的内容。

那么我们可以用video标签来实现它

效果

vue el-upload上传视频并回显预览,elementui,vue.js,音视频 vue部分

<el-form-item
              label="上传视频"
              style="margin-top: 15px; width: 49%"
              class="labelcolor"
              prop="videoUrl"
            >
              <el-upload
                :action="uploadFileUrl"
                :before-upload="beforeUpload"
                :on-success="handleUploadSuccess"
                :on-progress="uploadVideoProcess"
                :show-file-list="false"
                multiple
                :limit="1"
                :on-exceed="handleExceed"
                :file-list="fileList"
                class="avatar-uploader"
                id="avatar-uploader"
                :disabled="isDisabled"
              >
                <i
                  class="el-icon-circle-close"
                  v-if="form.videoUrl != ''"
                  @click="handleRemove"
                ></i>
                <div class="avatar-icon-box">
                  <img
                    v-if="form.videoUrl == ''"
                    class="avatar-icon imgess"
                    :src="require('@/assets/images/video-add.png')"
                    style="align-items: center; vertical-align: middle"
                  />
                  <video
                    v-else-if="form.videoUrl !== ''"
                    v-bind:src="form.videoUrl"
                    class="video-avatar"
                    :autoplay="true"
                    controls="controls"
                    muted
                    loop
                  ></video>

                  <el-progress
                    v-if="videoFlag == true"
                    type="circle"
                    v-bind:percentage="videoUploadPercent"
                    style="margin-top: 7px"
                  ></el-progress>
                </div>
              </el-upload>
            </el-form-item>

js部分

export default{
    data() {
        uploadFileUrl: process.env.VUE_APP_BASE_API + "/file/upload",
    },
    methods {
        beforeUpload(file) {
          const isMp4 = file.type === "video/mp4/webm/mov/flv/ani/wmv/3gp/m4v/mkv";
          // 限制文件最大不能超过 50M
          const isLt50M = file.size / 1024 / 1024 < 50;
          if (!isMp4) {
            this.$message.error("视频只能是mp4格式!");
          }
          if (!isLt50M) {
            this.$message.error("上传头像图片大小不能超过 300MB!");
          }
          return isMp4 && isLt50M;
        },
        // 文件上传成功回调
        handleUploadSuccess(files) {
          console.log("upload success", files,this.fileList);
          if (files.code === 200) {
            const { data } = files;
            this.form.videoUrl = data.url;
            this.isDisabled = true
          }
        },
        //进度条
        uploadVideoProcess (event, file, fileList) {    //注意在data中添加对应的变量名
          this.videoFlag = true
          this.videoUploadPercent = file.percentage.toFixed(0) * 1
        },
        handleExceed(files, fileList) {
            this.$message.warning(
            `当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
              files.length + fileList.length
            } 个文件`
            );
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            clearTimeout(this.timer);
            this.$refs.upload.clearFiles();
            this.$alert(response.msg, "导入结果", {
                dangerouslyUseHTMLString: true,
            });
            this.getList();
      
       },
       //图片删除
        handleRemove(file, fileList) {
          this.isDisabled = true
          console.log(this.isDisabled)
          this.$confirm(`确定移除视频？`)
            .then(() => {
                 this.form.videoUrl = ''
                 this.fileList = []
                 this.isDisabled = false
            })
            .catch(() => { })
        },
        beforeRemove(file) {
          return this.$confirm(`确定移除 ${file.name}？`);
        },
    }
}

css部分文章来源地址https://www.toymoban.com/news/detail-615813.html

.avatar-uploader {
  height: 280px;
  width: 400px;
  background-color: #313a69;
  border: 1px dashed #959bcb;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-uploader:hover .el-icon-circle-close {
  visibility: visible;
}
.video-avatar {
  width: 400px;
  height: 250px;
  // position: absolute;
  // z-index: 99;
}
.el-icon-circle-close {
  display: flex;
  float: right;
  margin-right: 6px;
  color: #959bcb;
  font-size: 22px;
  visibility: hidden;
}

到了这里，关于vue+elementui上传视频并回显的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！