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

在这里插入图片描述

接口视频上传

<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>

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

DataWorks快速入门

DataWorks快速入门

DataWorks基于MaxCompute、Hologres、EMR、AnalyticDB、CDP等大数据引擎&#xff0c;为数据仓库、数据湖、湖仓一体等解决方案提供统一的全链路大数据开发治理平台。本文以DataWorks的部分核心功能为例&#xff0c;指导您使用DataWorks接入数据并进行业务处理、周期调度以及数据…
阅读更多...
项目学习：仿b站的视频网站项目03-注册功能

项目学习：仿b站的视频网站项目03-注册功能

概括 通过上一期&#xff0c;完成了项目和数据库的基础结构的搭建&#xff0c;接下来主要是完成项目的注册功能。该功能模块主要分为有两个接口&#xff0c;一个是验证码接口&#xff0c;一个是注册接口。 让我们开始吧&#xff01; 验证码接口 验证码的生成主要配合下面这…
阅读更多...
20.100ASK_T113-PRO 开发板开机自动QT程序简单的方法一

20.100ASK_T113-PRO 开发板开机自动QT程序简单的方法一

本文详细介绍了在嵌入式系统中实现程序开机自启动的多种方法&#xff0c;包括通过修改/etc/profile、/etc/rc.local文件&#xff0c;以及在/etc/init.d目录下创建启动脚本等方式。文章还解释了不同配置文件的作用及它们之间的区别。 开机自动启动QT应用程序 用户模式下的启动 …
阅读更多...
【Java】Linux、Mac、Windows 安装 Oracle JDK

【Java】Linux、Mac、Windows 安装 Oracle JDK

一、Linux 环境安装JDK 1、下载 根据实际需求&#xff0c;在 Oracle 官网 上下载某版本JDK&#xff08;如 jdk-8u341-linux-x64.tar.gz&#xff09;&#xff0c;再通过文件传输工具&#xff08;如 Finalshell、FileZilla 等&#xff09;丢到服务器上。 2、安装 # 查看是否安…
阅读更多...
Web3与智能合约：区块链技术下的数字信任体系

Web3与智能合约：区块链技术下的数字信任体系

随着互联网的不断发展&#xff0c;Web3代表着我们迈入了一个去中心化、更加安全和智能的网络时代。作为Web3的核心组成部分&#xff0c;区块链技术为智能合约的出现和发展提供了强有力的基础。智能合约不仅仅是自动化的代码&#xff0c;它们正逐步成为重塑数字世界信任体系的关…
阅读更多...
怎么把湖南平江1000吨黄金开采出来？开采露天金矿的实用公式与方案——露天矿山爆破设计施工方案

怎么把湖南平江1000吨黄金开采出来？开采露天金矿的实用公式与方案——露天矿山爆破设计施工方案

在露天矿山爆破设计中&#xff0c;面对多溶洞、多破碎带和多断层的复杂地质条件&#xff0c;需要制定一套科学、合理的爆破方案。以下是一份详细的爆破设计施工方案&#xff0c;包括爆破参数与计算公式&#xff1a; 一、爆破设计原则 1.安全性&#xff1a;确保爆破作业过程中的…
阅读更多...
电子应用设计方案-20：智能电冰箱系统方案设计

电子应用设计方案-20：智能电冰箱系统方案设计

智能电冰箱系统方案设计 一、系统概述 本智能电冰箱系统旨在提供更便捷、高效、智能化的食品存储和管理解决方案&#xff0c;通过集成多种传感器、智能控制技术和联网功能&#xff0c;实现对冰箱内部环境的精确监测和控制&#xff0c;以及与用户的互动和远程管理。 二、系统组成…
阅读更多...
栈的应用,力扣394.字符串解码力扣946.验证栈序列力扣429.N叉树的层序遍历力扣103.二叉树的锯齿形层序遍历

栈的应用,力扣394.字符串解码力扣946.验证栈序列力扣429.N叉树的层序遍历力扣103.二叉树的锯齿形层序遍历

目录 力扣394.字符串解码 力扣946.验证栈序列 力扣429.N叉树的层序遍历 力扣103.二叉树的锯齿形层序遍历 力扣394.字符串解码 看见括号&#xff0c;由内而外&#xff0c;转向用栈解决。使用两个栈处理&#xff0c;一个用String,一个用Integer 遇到数字:提取数字放入到数字栈…
阅读更多...
pandas与open读取csv/txt文件速度比较

pandas与open读取csv/txt文件速度比较

pandas与open读取csv/txt文件速度比较 由于在工作中经常需要读取txt或csv文件&#xff0c;使用pandas与open均可以读取并操作文件内容&#xff0c;但不知道那个速度更快一些&#xff0c;所以写了一个脚本去比较在文件大小不同的情况下读取数据的速度 测试结果: 大小pandas速度…
阅读更多...
039_SettingsGroup_in_Matlab图形界面的设置选项

039_SettingsGroup_in_Matlab图形界面的设置选项

只要你知道你自己正在做什么&#xff0c;那么你怎么做都行。—— C.J. DateMatlab的界面与设置 Matlab的界面 Matlab的界面是GUI设计中非常值得讨论的一个议题。先来看&#xff0c;默认的Matlab界面。 这里的界面从上到下分为了四个部分&#xff0c;分别是&#xff1a; 工具…
阅读更多...
Flink-Source的使用

Flink-Source的使用

Data Sources 是什么呢&#xff1f;就字面意思其实就可以知道&#xff1a;数据来源。 Flink 做为一款流式计算框架&#xff0c;它可用来做批处理&#xff0c;也可以用来做流处理&#xff0c;这个 Data Sources 就是数据的来源地。 flink在批/流处理中常见的source主要有两大类…
阅读更多...
.net的winfrom程序 窗体透明打开窗体时出现在屏幕右上角

.net的winfrom程序 窗体透明打开窗体时出现在屏幕右上角

窗体透明&#xff0c; 将Form的属性Opacity&#xff0c;由默认的100% 调整到 80%(尽量别低于50%)&#xff0c;这个数字越小越透明&#xff01; 打开窗体时出现在屏幕右上角 //构造函数 public frmCalendarList() {InitializeComponent();//打开窗体&#xff0c;窗体出现在屏幕…
阅读更多...
分布式系统稳定性建设-性能优化篇

分布式系统稳定性建设-性能优化篇

分布式系统稳定性建设-性能优化篇 系统稳定性建设是系统工程的核心内容之一。以下是一些重要的方面: 架构设计: 采用模块化、松耦合的架构设计,以提高系统的可扩展性和可维护性。合理划分系统功能模块,降低单个模块的复杂度。定义清晰的接口和数据交换标准,确保各模块之间协调…
阅读更多...
【bug】使用transformers训练二分类任务时，训练损失异常大

【bug】使用transformers训练二分类任务时，训练损失异常大

使用transformers训练二分类任务时&#xff0c;训练损失异常大 问题分析 问题 training_loss异常大&#xff0c;在二分类损失中&#xff0c;收敛在1~2附近&#xff0c;而eval_loss却正常&#xff08;小于0.5&#xff09; 分析 参考&#xff1a; Bug in gradient accumulation…
阅读更多...
电容测试流程

电容测试流程

一、外观检测 1. 目的&#xff1a;检验电容样品外观是否与规格书一致&#xff0c;制程工艺是否良好&#xff0c;确保部品的品质。 2. 仪器&#xff1a;放大镜 3. 测试说明&#xff1a; &#xff08;1&#xff09;样品上丝印与规格书中相符&#xff0c;丝印信息&#xff08;…
阅读更多...
C++设计模式行为模式———中介者模式

C++设计模式行为模式———中介者模式

文章目录 一、引言二、中介者模式三、总结 一、引言 中介者模式是一种行为设计模式&#xff0c; 能让你减少对象之间混乱无序的依赖关系。 该模式会限制对象之间的直接交互&#xff0c; 迫使它们通过一个中介者对象进行合作。 中介者模式可以减少对象之间混乱无序的依赖关系&…
阅读更多...
一篇保姆式centos/ubuntu安装docker

一篇保姆式centos/ubuntu安装docker

前言&#xff1a; 本章节分别演示centos虚拟机&#xff0c;ubuntu虚拟机进行安装docker。 上一篇介绍&#xff1a;docker一键部署springboot项目 一&#xff1a;centos 1.卸载旧版本 yum remove docker docker-client docker-client-latest docker-common docker-latest doc…
阅读更多...
EasyAnimate：基于Transformer架构的高性能长视频生成方法

EasyAnimate：基于Transformer架构的高性能长视频生成方法

这里主要是对EasyAnimate的论文阅读记录&#xff0c;感兴趣的话可以参考一下&#xff0c;如果想要直接阅读原英文论文的话地址在这里&#xff0c;如下所示&#xff1a; 摘要 本文介绍了EasyAnimate&#xff0c;一种利用Transformer架构实现高性能视频生成的高级方法。我们将原…
阅读更多...
李宏毅机器学习课程知识点摘要（6-13集）

李宏毅机器学习课程知识点摘要（6-13集）

pytorch简单的语法和结构 dataset就是数据集&#xff0c;dataloader就是分装好一堆一堆的 他们都是torch.utils.data里面常用的函数&#xff0c;已经封装好了 下面的步骤是把数据集读进来 这里是读进来之后&#xff0c;进行处理 声音信号&#xff0c;黑白照片&#xff0c;红…
阅读更多...
gpt2的学习

gpt2的学习

现在学习下gpt2模型做摘要&#xff0c;我们都知道gpt2 是纯decoder&#xff0c;做摘要说话的效果较好。 把数据拆分 按照这个进行tokenizer 用这个tokenizer BertTokenizer.from_pretrained(‘bert-base-chinese’) 2w多词汇表 用交叉熵做lossf&#xff0c; 设好一些简单的…
阅读更多...
最新文章

Copyright @ 2022~2023