el-upload 上传视频并回显

最新推荐文章于 2024-07-08 12:24:08 发布

不想上班只想要钱

最新推荐文章于 2024-07-08 12:24:08 发布

阅读量1.7k

点赞数

分类专栏： Java Web 前端 css 文章标签：音视频

本文链接：https://blog.csdn.net/Aa12364567/article/details/132015839

版权

前端同时被 3 个专栏收录

159 篇文章 3 订阅

订阅专栏

css

84 篇文章 1 订阅

订阅专栏

Java Web

43 篇文章 2 订阅

订阅专栏

该代码段展示了在Vue.js应用中如何使用element-ui的el-upload组件来上传mp4视频，并在上传成功后显示视频。它包含处理上传前的验证、成功后的回调、进度条显示以及视频预览功能。

摘要由CSDN通过智能技术生成

el-upload上传视频，并且显示上传的视频

<el-form-item>
          <label slot="label"><span style="color:#F56C6C">*</span> 视频</label>

          <el-upload class="upload-demo" style="width:360px" :action="picUploadApi" :before-upload="beforeUpload"
            :on-success='protocolSuccess' multiple :limit="1" list-type="picture-card" :on-progress="uploadVideoProcess"
            :on-preview="handlePictureCardPreview" :on-remove="protocolRemove" :show-file-list="false"
            :file-list="fileList" accept=".mp4" :disabled="fileId != '' || videoFlag">

            <i class="el-icon-circle-close" v-if="fileId != ''" @click="protocolRemove"></i>

            <video v-if="fileId != ''" :src="picApi + '?fileId=' + fileId" class="video-avatar" controls="controls">
              您的浏览器不支持视频播放
            </video>

            <i v-if="!videoFlag" :class="{ 'hide': fileList.length === 1 }" class="el-icon-plus"></i>

            <el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent"
              class="video-progress"></el-progress>

            <div slot="tip" :class="{ 'el-upload__tip': true, 'hide': fileList.length === 1 }">只能上传mp4文件</div>

          </el-upload>

          <div v-if="fileId != ''" class="video-cover"></div>

        </el-form-item>

data(){
  return {
      picUploadApi: this.api.uploadFile, // 上传视频
      picApi: this.api.loadPicById, // 显示视频
      fileList: [],  // 视频上传数据
      fileId: '', //轮播图上传成功后返回的文件id
      duration: 0,
      dialogVideoUrl: '', // 视频放大查看url
      dialogVisible: false, // 视频放大查看弹窗
      videoUploadPercent: 0, // 视频上传进度
      videoFlag: false, // 是否展示视频上传进度icon
      }
   }

    // 视频上传成功
    protocolSuccess(res, file) {
      if (file.response.code == 200) {
        this.fileId = res.data
        this.fileList.push(file)
        this.getVideoTime(file)
      } else {
        this.$message({
          message: file.response.message,
          type: "error",
        });
      }
    },

/* 上传控件样式 */
.el-icon-circle-close {
  position: absolute;
  z-index: 999;
  right: 75PX;
}

.el-icon-plus.hide {
  display: none;
}

.video-progress {
  margin-top: 17PX;
  position: absolute;
  left: 17PX;
}

.video-avatar {
  height: 160PX;
}

.el-upload__tip.hide {
  display: none;
}

.video-cover {
  width: 360PX;
  height: 100PX;
  /* background: rgba(0,0,0,0.3); */
  position: absolute;
  top: 0;
}

*/deep/.upload-demo>.el-upload-list>.el-upload-list__item>.el-upload-list__item-name {
  color: #fff;
}

*/deep/.upload-demo>.el-upload-list>.el-upload-list__item:hover {
  background-color: #024e9f;
}

*/deep/.upload-demo>.el-upload-list>.el-upload-list__item>.el-upload-list__item-name>i {
  color: #fff;
}

*/deep/.upload-demo>.el-upload-list>.el-upload-list__item>i {
  color: #fff;
}

/* 上传控件视频样式 */
.upload-img-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

*/deep/.upload-demo.hide {
  /* display: flex; */
  height: 60px;
}

*/deep/.upload-demo>.el-upload-list--picture-card>.el-upload-list__item.is-success {
  width: 60px;
  height: 60px;
  margin-right: 15px;
}

*/deep/.upload-demo>.el-upload--picture-card {
  width: 160px;
  height: 160px;
  line-height: 165px;
}