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

news2024/11/26 1:21:20

在这里插入图片描述

接口视频上传

<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,
      immediate: true,
    },
  },

  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  methods: {
    // 上传成功回调
    handleUploadSuccess(res) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      // this.videoUploadPercent = 0;
      console.log("handleUploadSuccess");
      //后台上传数据
      if (res.code == 200) {
        this.videoForm.showVideoPath = res.data.url; //上传成功后端返回视频地址 回显
        // var audioElement = new Audio(url);
        this.$emit("input", res.data.url, this.duration);
        this.$modal.msgSuccess("上传成功！");
      } else {
        this.$message.error("上传失败！");
      }
    },
    // 上传前loading加载
    handleBeforeUpload(file) {
      var url = URL.createObjectURL(file);
      var audioElement = new Audio(url);
      var time;
      var that = this;
      audioElement.addEventListener("loadedmetadata", function () {
        time = audioElement.duration; //时长为秒
        that.duration = time;
      });
      var fileSize = file.size / 1024 / 1024 < this.fileSize; //控制大小  修改50的值即可
      if (
        ["video/mp4"].indexOf(file.type) == -1 //控制格式
      ) {
        this.$modal.msgError(
          `文件格式不正确, 请上传${this.fileType.join("/")}视频格式文件!`
        );
        return false;
      }
      if (!fileSize) {
        this.$modal.msgError(`上传视频大小不能超过 ${this.fileSize} MB!`);
        return false;
      }
    },
    //进度条--------
    uploadVideoProcess(event, file, fileList) {
      //注意在data中添加对应的变量名
      this.videoFlag = true;
      console.log(file, "file", file.percentage);
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
    },
    // 文件个数超出
    handleExceed() {
      this.$modal.msgError(`上传视频数量不能超过 ${this.limit} 个!`);
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError("上传视频失败，请重试");
      this.$modal.closeLoading();
    },
    handleDelete() {
      this.videoFlag = false;
      // 清除已上传的文件
      this.$refs.uploadRef.clearFiles();
      // 在这里可以执行其他删除操作，例如将视频地址重置为null
      this.videoForm.showVideoPath = "";
    },
  },
};
</script>

<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
::v-deep.hideUpload .el-upload--picture-card {
  display: none;
}

::v-deep .el-upload--picture-card {
  width: 104px;
  height: 104px;
  line-height: 104px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 104px;
  height: 104px;
}

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}

.avatar-uploader .el-upload:hover {
  border: 1px dashed #d9d9d9 !important;
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 300px;
  height: 178px;
  display: block;
}
</style>

oss直传视频到阿里云组件

<template>
  <div class="component-upload-image">
    <el-upload
      action=""
      :http-request="beforeUpload"
      class="avatar-uploader"
      :limit="limit"
      :on-error="handleUploadError"
      :on-exceed="handleExceed"
      name="file"
      :show-file-list="false"
      :file-list="fileList"
      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 { getOssParameter } from "./oss";

export default {
  props: {
    value: [String, Object, Array],
    // 图片数量限制
    limit: {
      type: Number,
      default: 1,
    },
    // 大小限制(MB)
    fileSize: {
      type: Number,
      default: 5120,
    },
    fileType: {
      type: Array,
      default: () => ["video/*"],
    },
    // 是否显示提示
    isShowTip: {
      type: Boolean,
      default: true,
    },
    // 是否显示进度条
    isShowUploadVideo: {
      type: Boolean,
      default: false,
    },
    // 是否显示重新上传按钮
    isShowBtn: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      hideUpload: false,
      baseUrl: process.env.VUE_APP_BASE_API,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/file/upload", // 上传的图片服务器地址
      fileList: [],
      videoForm: {
        showVideoPath: "", //回显的变量
      },
      videoFlag: false,
      videoUploadPercent: 0,
      isCancel: false,
    };
  },
  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,
      immediate: true,
    },
  },
  computed: {
    // 是否显示提示
    showTip() {
      return this.isShowTip && (this.fileType || this.fileSize);
    },
  },
  methods: {
    //自定义上传方法..
    Upload(file, data) {
      let OSS = require("ali-oss");
      let client = new OSS({
        region: data.region,
        accessKeyId: data.accessKeyId,
        accessKeySecret: data.accessKeySecret,
        bucket: data.bucket,
      });
      // let cdnUrl = data.cdnUrl;
      let cdnUrl = "https://cdn-learning.cscec83.cn/";
      this.isCancel = false;
      //判断扩展名
      const tmpcnt = file.file.name.lastIndexOf(".");
      const exname = file.file.name.substring(tmpcnt + 1);
      //  配置路径以及文件名称
      const fileName = file.file.uid + "." + exname;
      const progress = (p, _checkpoint) => {
        this.videoFlag = true;
        this.videoUploadPercent = Number((Number(p) * 100).toFixed(1));
        console.log(this.isCancel);
        if (this.isCancel) {
          client.cancel();
        }
      };
      client
        .multipartUpload(fileName, file.file, {
          progress,
          // 设置并发上传的分片数量。
          // parallel: 4,
          // 设置分片大小。默认值为1 MB，最小值为100 KB。
          partSize: 5 * 1024 * 1024,
        })
        .then((res) => {
          console.log(res, "res");
          this.videoFlag = false;
          if (res.name) {
            this.videoForm.showVideoPath = cdnUrl + res.name;
            console.log(this.videoForm.showVideoPath, "fileUrl");
            this.$emit("input", this.videoForm.showVideoPath, this.duration);
            // this.loading.close();
          } else {
            this.$modal.msgError("上传视频失败，请重试");
            // this.loading.close();
            this.handleDelete();
          }
        })
        .catch((err) => {
          console.log(err);
          if (err.name == "cancel") {
            this.$message("上传取消");
          } else {
            this.$modal.msgError(err);
          }
          this.handleDelete();
        });
    },
    handleDelete() {
      this.isCancel = true;
      this.videoFlag = false;
      this.$refs.uploadRef.clearFiles();
      this.duration = 0;
      this.videoForm.showVideoPath = "";
      this.$emit("input", this.videoForm.showVideoPath, this.duration);
      // 清除已上传的文件
    },
    // 上传前loading加载
    beforeUpload(file) {
      var fileSize = file.file.size / 1024 / 1024 < this.fileSize; //控制大小  修改50的值即可
      console.log(file.file.type);
      if (
        this.fileType.indexOf(file.file.type) == -1 //控制格式
      ) {
        this.$modal.msgError(
          `文件格式不正确, 请上传${this.fileType.join("/")}视频格式文件!`
        );
        return false;
      }
      if (!fileSize) {
        this.$modal.msgError(`上传视频大小不能超过 ${this.fileSize} MB!`);
        return false;
      }
      var url = URL.createObjectURL(file.file);
      var audioElement = new Audio(url);
      var time;
      var that = this;
      audioElement.addEventListener("loadedmetadata", function () {
        time = audioElement.duration; //时长为秒
        that.duration = time;
      });
      // this.loading = this.$loading({
      //   lock: true,
      //   text: "上传中",
      //   background: "rgba(0, 0, 0, 0.7)",
      // });
      getOssParameter().then((res) => {
        if (res.code == 200) {
          this.Upload(file, res.data);
        }
      });
    },
    // 文件个数超出
    handleExceed() {
      this.$message.error(`上传文件数量不能超过 ${this.limit} 个!`);
    },
    // 上传失败
    handleUploadError() {
      this.$modal.msgError("上传失败，请重试");
      // this.loading.close();
    },
    uploadCancel() {
      this.isCancel = true;
    },
  },
};
</script>
<style scoped lang="scss">
// .el-upload--picture-card 控制加号部分
::v-deep.hideUpload .el-upload--picture-card {
  display: none;
}

::v-deep .el-upload--picture-card {
  width: 104px;
  height: 104px;
  line-height: 104px;
}

::v-deep .el-upload-list--picture-card .el-upload-list__item {
  width: 104px;
  height: 104px;
}

.avatar-uploader-icon {
  border: 1px dashed #d9d9d9 !important;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9 !important;
  border-radius: 6px !important;
  position: relative !important;
  overflow: hidden !important;
}

.avatar-uploader .el-upload:hover {
  border: 1px dashed #d9d9d9 !important;
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 300px;
  height: 178px;
  display: block;
}
</style>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2247577.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

深度学习图像视觉 RKNN Toolkit2 部署 RK3588S边缘端 过程全记录

深度学习图像视觉 RKNN Toolkit2 部署 RK3588S边缘端 过程全记录

深度学习图像视觉 RKNN Toolkit2 部署 RK3588S边缘端 过程全记录 认识RKNN Toolkit2 工程文件学习路线&#xff1a; Anaconda Miniconda安装.condarc 文件配置镜像源自定义conda虚拟环境路径创建Conda虚拟环境 本地训练环境本地转换环境安装 RKNN-Toolkit2&#xff1a;添加 lin…
阅读更多...
07-SpringCloud-Gateway新一代网关

07-SpringCloud-Gateway新一代网关

一、概述 1、Gateway介绍 官网&#xff1a;https://spring.io/projects/spring-cloud-gateway Spring Cloud Gateway组件的核心是一系列的过滤器&#xff0c;通过这些过滤器可以将客户端发送的请求转发(路由)到对应的微服务。 Spring Cloud Gateway是加在整个微服务最前沿的防…
阅读更多...
美创科技入选2024数字政府解决方案提供商TOP100！

美创科技入选2024数字政府解决方案提供商TOP100！

11月19日&#xff0c;国内专业咨询机构DBC德本咨询发布“2024数字政府解决方案提供商TOP100”榜单。美创科技凭借在政府数据安全领域多年的项目经验、技术优势与创新能力&#xff0c;入选收录。 作为专业数据安全产品与服务提供商&#xff0c;美创科技一直致力于为政府、金融、…
阅读更多...
Java编程，配置mongoUri连接mongodb时，需对特殊字符进行转义

Java编程，配置mongoUri连接mongodb时，需对特殊字符进行转义

一、背景 java程序连接mongo有两种方式&#xff1a; 用户名和密码方式uri方式 1、用户名和密码 以用户数据库为例&#xff0c;注意看它的密码 spring:data:mongodb:host: 192.168.10.17database: db_user_serviceport: 3717username: user_servicepassword: user_service3…
阅读更多...
MySQL底层概述—1.InnoDB内存结构

MySQL底层概述—1.InnoDB内存结构

大纲 1.InnoDB引擎架构 2.Buffer Pool 3.Page管理机制之Page页分类 4.Page管理机制之Page页管理 5.Change Buffer 6.Log Buffer 1.InnoDB引擎架构 (1)InnoDB引擎架构图 (2)InnoDB内存结构 (1)InnoDB引擎架构图 下面是InnoDB引擎架构图&#xff0c;主要分为内存结构和磁…
阅读更多...
【Github】如何使用Git将本地项目上传到Github

【Github】如何使用Git将本地项目上传到Github

【Github】如何使用Git将本地项目上传到Github 写在最前面1. 注册Github账号2. 安装Git工具配置用户名和邮箱仅为当前项目配置&#xff08;可选&#xff09; 3. 创建Github仓库4. 获取仓库地址5. 本地操作&#xff08;1&#xff09;进入项目文件夹&#xff08;2&#xff09;克隆…
阅读更多...
大事件管理系统项目总结（上）

大事件管理系统项目总结（上）

文章目录 大事件管理系统项目总结&#xff08;上&#xff09;Pinia - 配置仓库统一管理Vue3路由配置Vue3导航拦截 大事件管理系统项目总结&#xff08;上&#xff09; Pinia - 配置仓库统一管理 使用pinia多层文件夹嵌套时&#xff0c;导入某个文件的路径会很长&#xff0c;容…
阅读更多...
鸿蒙征文｜鸿蒙心路旅程：始于杭研所集训营，升华于横店

鸿蒙征文｜鸿蒙心路旅程：始于杭研所集训营，升华于横店

始于杭研所 在2024年7月&#xff0c;我踏上了一段全新的旅程&#xff0c;前往风景如画的杭州&#xff0c;参加华为杭研所举办的鲲鹏&昇腾集训营。这是一个专门为开发者设计的培训项目&#xff0c;中途深入学习HarmonyOS相关技术。对于我这样一个对技术充满热情的学生来说&…
阅读更多...
flowable流程图详细绘制教程

flowable流程图详细绘制教程

文章目录 前言一、flowable是什么&#xff1f;回答下之前的问题 二、flowable-modeler使用1. 使用步骤2.开始绘制弄一个请假的流程 三 加载该流程总结 前言 flowable有些晦涩难懂的东西&#xff1a; 我最开始接触的时候,还是用的activity,当时觉得好复杂,那么这次经过我自己在…
阅读更多...
【Linux 篇】Docker 的容器之海与镜像之岛：于 Linux 系统内探索容器化的奇妙航行

【Linux 篇】Docker 的容器之海与镜像之岛：于 Linux 系统内探索容器化的奇妙航行

文章目录&#xff1a; 【Linux 篇】Docker 的容器之海与镜像之岛&#xff1a;于 Linux 系统内探索容器化的奇妙航行前言安装docker-centos7 【Linux 篇】Docker 的容器之海与镜像之岛&#xff1a;于 Linux 系统内探索容器化的奇妙航行 &#x1f4ac;欢迎交流&#xff1a;在学习…
阅读更多...
linux从0到1——shell编程9

linux从0到1——shell编程9

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…
阅读更多...
go项目中比较好的实践方案

go项目中比较好的实践方案

工作两年来&#xff0c;我并未遇到太大的挑战&#xff0c;也没有特别值得夸耀的项目。尽管如此&#xff0c;在日常的杂项工作中&#xff0c;我积累了不少心得&#xff0c;许多实践方法也在思考中逐渐得到优化。因此&#xff0c;我在这里记录下这些心得。 转发与封装 这个需求…
阅读更多...
Maven的安装——给Idea配置Maven

Maven的安装——给Idea配置Maven

一、什么是Maven? Maven是一个开源的项目管理工具&#xff0c;它主要用于Java项目的构建、依赖管理和项目生命周期管理。 二、准备环境 maven安装之前&#xff0c;我们要先安装jdk&#xff0c;确保你已经安装了jdk环境。可以通过【win】【r】打开任务管理器&#xff0c;输入…
阅读更多...
vscode 远程连接ssh 密钥方式

vscode 远程连接ssh 密钥方式

目录 1. powershell 生成key&#xff1a; 2. 在服务器上安装公钥 linux测试成功&#xff1a; 3).为了确保连接成功&#xff0c;输入如下指令以保证以下文件权限正确&#xff1a; 3 开启 ssh 密钥登录 vscode 远程连接配置 python连接测试ok 查看日志&#xff1a; 命令…
阅读更多...
Charles抓包工具-笔记

Charles抓包工具-笔记

摘要 概念&#xff1a; Charles是一款基于 HTTP 协议的代理服务器&#xff0c;通过成为电脑或者浏览器的代理&#xff0c;然后截取请求和请求结果来达到分析抓包的目的。 功能&#xff1a; Charles 是一个功能全面的抓包工具&#xff0c;适用于各种网络调试和优化场景。 它…
阅读更多...
Echarts+VUE饼图的使用（基础使用、多个饼图功能、单组饼图对应颜色使用）

Echarts+VUE饼图的使用（基础使用、多个饼图功能、单组饼图对应颜色使用）

安装&#xff1a;npm install echarts --save 配置:main.js // 引入echarts import * as echarts from echarts Vue.prototype.$echarts echarts一、基础饼图&#xff08;直接拷贝就能出效果&#xff09; <div class"big-box" ref"demoEhart"><…
阅读更多...
神经网络（系统性学习三）：多层感知机（MLP）

神经网络（系统性学习三）：多层感知机（MLP）

相关文章&#xff1a; 神经网络中常用的激活函数 神经网络&#xff08;系统性学习一&#xff09;&#xff1a;入门篇 神经网络&#xff08;系统性学习二&#xff09;&#xff1a;单层神经网络&#xff08;感知机&#xff09; 多层感知机&#xff08;MLP&#xff09; 多层感…
阅读更多...
C语言练习.if.else语句.strstr

C语言练习.if.else语句.strstr

今天在做题之前&#xff0c;先介绍一下&#xff0c;新学到的库函数strstr 想要使用它&#xff0c;要先给它一个头文件<string.h> char *strstr(const char*str1,const char*str2); 首先&#xff1a;1.strstr的返回值是char&#xff0c;字符类型的。 2.两个实参&#xff…
阅读更多...
golang实现TCP服务器与客户端的断线自动重连功能

golang实现TCP服务器与客户端的断线自动重连功能

1.服务端 2.客户端 生成服务端口程序： 生成客户端程序： 测试断线重连： 初始连接成功
阅读更多...
c语言数据结构与算法--简单实现线性表（顺序表+链表）的插入与删除

c语言数据结构与算法--简单实现线性表（顺序表+链表）的插入与删除

老规矩&#xff0c;点赞评论收藏关注&#xff01;&#xff01;&#xff01; 目录 线性表 其特点是&#xff1a; 算法实现&#xff1a; 运行结果展示 链表 插入元素&#xff1a; 删除元素&#xff1a; 算法实现 运行结果 线性表是由n个数据元素组成的有限序列&#xff…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023