接口上传视频和oss直传视频到阿里云组件

最新推荐文章于 2025-01-14 21:51:44 发布

小曲曲

最新推荐文章于 2025-01-14 21:51:44 发布

阅读量950

点赞数 1

CC 4.0 BY-SA版权

分类专栏：若依 vue 文章标签：音视频阿里云 javascript

本文链接：https://blog.youkuaiyun.com/weixin_43848576/article/details/143951440

在这里插入图片描述

接口视频上传

<template>
  <div class="component-upload-video">
    <el-upload
      class="avatar-uploader"
      :action="uploadImgUrl"
      :on-progress="uploadVideoProcess"
      :on-success="handleUploadSuccess"
      :limit="limit"
      :file-list="fileList"
      :before-upload="handleBeforeUpload"
      :show-file-list="false"
      :headers="headers"
      ref="uploadRef"
    >
      <video
        v-if="videoForm.showVideoPath && !videoFlag"
        :src="videoForm.showVideoPath"
        class="avatar video-avatar"
        controls="controls"
      >
        您的浏览器不支持视频播放
      </video>
      <!-- //i标签是上传前的那个+上传后隐藏 -->
      <i
        v-else-if="!videoForm.showVideoPath && !videoFlag"
        class="el-icon-plus avatar-uploader-icon"
      ></i>
      <el-progress
        v-if="videoFlag == true"
        type="circle"
        :percentage="videoUploadPercent"
        style="margin-top: 7px"
      ></el-progress>
    </el-upload>
    <el-button
      v-if="isShowBtn && videoForm.showVideoPath"
      class="mt-20"
      plain
      round
      @click="handleDelete"
      size="small"
      type="primary"
      >重新上传<i class="el-icon-upload el-icon--right"></i
    ></el-button>
  </div>
</template>

<script>
import {
   
    getToken } from "@/utils/auth";

export default {
   
   
  props: {
   
   
    value: [String, Object, Array],
    // 图片数量限制
    limit: {
   
   
      type: Number,
      default: 5,
    },
    // 大小限制(MB)
    fileSize: {
   
   
      type: Number,
      default: 50,
    },
    // 序号
    indexValue: {
   
   
      type: Number,
      default: null,
    },
    // 文件类型, 例如['video/avi', 'video/wmv', 'video/rmvb']
    fileType: {
   
   
      type: Array,
      default: () => ["video/mp4", "video/ogg", "video/flv"],
    },
    // 是否显示提示
    isShowTip: {
   
   
      type: Boolean,
      default: false,
    },
    // 是否显示进度条
    isShowUploadVideo: {
   
   
      type: Boolean,
      default: false,
    },
    // 是否显示重新上传按钮
    isShowBtn: {
   
   
      type: Boolean,
      default: true,
    },
  },
  data() {
   
   
    return {
   
   
      number: 0,
      dialogVisible: false,
      hideUpload: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的服务器地址
      headers: {
   
   
        Authorization: "Bearer " + getToken(),
      },
      fileList: [],
      videoForm: {
   
   
        showVideoPath: "", //回显的变量
      },
      duration: 0, //时长秒
      videoFlag: false,
      videoUploadPercent: 0,
    };
  },

  watch: {
   
   
    value: {
   
   
      handler(val) {
   
   
        if (val) {
   
   
          this.videoForm.showVideoPath = val;
          // 首先将值转为数组
          const list = Array.isArray(val) ? val : this.value.split(",");
          // 然后将数组转为对象数组
          this.fileList = list.map((item) => {
   
   
            if (typeof item === "string") {
   
   
              item = {
   
    name: item, url: item };
            }
            return item;
          });
        } else {
   
   
          this.fileList = [];
          return [];
        }
      },
      deep: true