vue 上传视频

最新推荐文章于 2024-04-29 10:42:46 发布
最新推荐文章于 2024-04-29 10:42:46 发布
阅读量533 收藏 1
点赞数 2
分类专栏： vue  文章标签： vue.js 音视频 elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/CMDN123456/article/details/137602007
版权

controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件

代码：

<template>
  <div class="schematicDiagramIndex">
    <el-container>
      <el-header v-if="this.radiooCar==1">
        <el-button @click="addOpen">新增</el-button>
        <el-button @click="updateOpen">编辑</el-button>
        <el-button @click="delOpen">删除</el-button>
      </el-header>
      <el-container>
        <!-- 左侧树 -->
        <el-aside width="20rem;height: 100%;">
          <div style="height: 100%;overflow-y: scroll">
            <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText"
            >
            </el-input>
            <el-tree
                :accordion="true"
                class="filter-tree"
                :data="CompanyLeftData"
                :props="defaultProps"
                :expand-on-click-node="false"
                :default-expanded-keys="[1]"
                highlight-current
                node-key="value"
                :default-expand-all="true"
                @node-click="handleNodeClick"
                :filter-node-method="filterNode"
                ref="treeList"
                :height="heights"
            >
            </el-tree>
          </div>
        </el-aside>
       
        <el-main  v-loading="showVideo">
          <!-- 视频 -->
         <div class="video1">
          <!-- controlslist 属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件
             loop属性用于设置或返回视频结束时是否应该重新开始播放。
           -->
           <video
               id="video1"
               controls="controls"
               loop="loop"
               ref="video"
               :height="heights"
               controlslist="nodownload "
           >
             <source
                 :src="videoURL"
                 type="video/mp4"
             />
             您的浏览器不支持 HTML5 video 标签。
           </video>
         </div>
        </el-main>
      </el-container>
    </el-container>
    <!--    车的弹框-->
    <el-dialog
        :title="title"
        v-model="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <!--      表单-->
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="上级节点" prop="ParentId">
          <!--          <el-input v-model="ruleForm.ParentId" placeholder="请输入内容"></el-input>-->
          <el-select v-model="ruleForm.ParentId" placeholder="请选择">
            <el-option
                v-for="item in ParentIdOptions"
                :key="item.ID"
                :label="item.Text"
                :value="item.ID">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="视频名称" prop="VideoName">
          <el-input v-model="ruleForm.VideoName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="序号" prop="SortID">
          <el-input min="0" v-model="ruleForm.SortID" placeholder="请输入内容" type="number"
                    @input="changeInput(ruleForm.SortID)"></el-input>
        </el-form-item>
        <el-form-item label="上传视频" prop="pass">
          <el-upload
              ref="videoUpload"
              class="upload-demo"
              action="#"
              multiple
              :limit="1"
              :on-change="handleChange"
              :before-upload="beforeUpload"
              :on-success="onSuccess"
              :on-error="onError"
              accept="video/*"
              :auto-upload="false"
              :on-exceed="handleExceedVisio"
              :file-list="fileList">
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "schematicDiagramIndex",
  data() {
    return {
      //树形结构
      defaultProps: {
        children: "Children",
        label: "Text",
        id: "ID",
      },
      //左侧树形数据
      CompanyLeftData: [],
      //油泵车
      oldoil: {
        // value: "1",
        label: "油泵车",
        children: [
          {
            value: "1-1",
            label: "操作部分",
            type: "YBC",
            children: [
              {
                value: "1",
                label: "双系统独立自循环",
                type: "YBC",
              },
              {
                value: "4",
                label: "双系统合流自循环",
                type: "YBC",
              },
              {
                value: "5",
                label: "液压系统排气",
                type: "YBC",
              },
              {
                value: "8",
                label: "油液固体颗粒污染自检和取样检测",
                type: "YBC",
              },
              {
                value: "9",
                label: "双系统独立输出",
                type: "YBC",
              },
              {
                value: "10",
                label: "双系统合流输出",
                type: "YBC",
              },
              {
                value: "11",
                label: "加油软管内液压油自循环净化",
                type: "YBC",
              },
              {
                value: "12",
                label: "为飞机补充加注液压油",
                type: "YBC",
              },
              {
                value: "13",
                label: "液压油箱自加油",
                type: "YBC",
              },
              {
                value: "14",
                label: "液压系统除水除气",
                type: "YBC",
              },
              {
                value: "15",
                label: "操作界面",
                type: "YBC",
              },
            ],
          },
          {
            value: "1-2",
            label: "产品组成",
            type: "YBC",
            children: [
              {
                value: "2",
                label: "箱体组成",
                type: "YBC",
              },
              {
                value: "3",
                label: "电气系统组成",
                type: "YBC",
              },
              {
                value: "6",
                label: "液压系统组成",
                type: "YBC",
              },
              {
                value: "7",
                label: "动力系统组成",
                type: "YBC",
              },
            ],
          },
          {
            value: "1-3",
            label: "原理构图",
            type: "YBC",
            children: [
              {
                value: "17",
                label: "清洗飞机液压系统油液原理",
                type: "YBC",
              },
              {
                value: "18",
                label: "双系统独立输出对接保障原理",
                type: "YBC",
              },
              {
                value: "19",
                label: "双系统合流并联输出对接保障原理",
                type: "YBC",
              },
              {
                value: "20",
                label: "为飞机补充加注液压油原理",
                type: "YBC",
              },
              {
                value: "21",
                label: "液压系统油箱自加油原理",
                type: "YBC",
              },
              {
                value: "22",
                label: "液压系统自循环原理",
                type: "YBC",
              },
            ],
          },
          {
            value: "1-4",
            label: "功能用途",
            type: "YBC",
            children: [
              {
                value: "16",
                label: "功能用途",
                type: "YBC",
              },
            ],
          },
        ],
      },
      //电源车
      PowerTruck: {},
      filterText: "",//树形数据过滤字段
      //视频地址
      videoURL: "",
      heights: "", //高度
      radiooCar: null, //车辆选择的类型
      dialogVisible: false,//dialog弹出框控制显隐
      dialogTitle: "",//dialog的标题提示
      rules: {
        VideoName: [
          {required: true, message: '请输入活动名称', trigger: 'blur'},
        ],
      },//校验
      ruleForm: {},//表单数据
      fileList: [],//上传视频的数组
      submitVideo: null,
      //父级下拉数据
      ParentIdOptions: [],
      //选中左侧树数据
      checkedLeftTreeData: null,
      //video loading
      showVideo:true,
    };
  },
  created() {
    this.init();
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.treeList.$el.getBoundingClientRect().top; //表格距离浏览器的高度
      // 根据浏览器高度设置初始高度
      this.heights =
          window.innerHeight - this.$refs.treeList.$el.offsetTop - 150;
      // 监听浏览器高度变化，修改表格高度
      window.onresize = () => {
        this.heights =
            window.innerHeight - this.$refs.treeList.$el.offsetTop - 150;
      };
    });
  },
  methods: {
    //初始数据
    init() {
      this.getCarData();
    },
    // 获取本地存储的车辆选择类型，判断是电源车还是油泵车
    getCarData() {
      this.radiooCar = sessionStorage.getItem("radioCar");
      this.getTreeData()
    },
    //  获取左侧树结构
    getTreeData() {
      //获取本地存储的选择的车型 调接口
      let params = {EquipmentType: this.radiooCar}
      this.$WAPI.Ts_VideoGetTreeList(params).then((res) => {
        //赋值
        this.CompanyLeftData = res.data.data
        //父级ID
        this.ParentIdOptions = res.data.data
        //默认选中展示
        this.setCurrentKeyData();
      })
    },
    //进行切换数据（点击事件）
    handleNodeClick(data, checked) {
      this.$refs.video.load();
      if (checked) {
        //进行勾选的数据
        this.$refs.treeList.setCheckedNodes([data]);
        //勾选的数据进行赋值保存
        this.checkedLeftTreeData = data
        //获取视频url 传递后端参数
        let param={ ID:data.ID }
        this.$WAPI.Ts_VideoGetVideoUrl(param).then((res) => {
          this.showVideo=false
          //赋值视频路径
          this.$refs.video.src = res.data.data ? res.data.data.URL : ""
        })
      }
    },
    //进行模糊查询
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    //  默认选中
    setCurrentKeyData() {
      this.$nextTick(() => {
        this.$refs.treeList &&
        this.$refs.treeList.setCurrentKey(
            this.CompanyLeftData[0].Children[0]
        );
        this.handleNodeClick(
            this.CompanyLeftData[0].Children[0],
            true
        );
      });
    },
    //#region 电源车 有新增、编辑、删除等功能
    //新增打开dialog事件
    addOpen() {
      this.dialogVisible = true
      this.title = "新增"
      this.ruleForm = {}
      this.fileList = []
    },
    //编辑
    updateOpen() {
      this.dialogVisible = true
      this.title = "编辑"
      this.ruleForm = this.checkedLeftTreeData.Model
      const fileList = []
      if (this.ruleForm.FileName !== null||this.ruleForm.FileUrl !== null){
        fileList.push({
          name: this.ruleForm.VideoName,
          url: this.ruleForm.FileUrl,
        })
      }
      this.fileList=fileList
    },
    //删除
    delOpen() {
      //选中的参数
      let param = {
        IDs: this.checkedLeftTreeData.ID
      }
      this.$WAPI.Ts_VideoDelete(param).then(res => {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
        this.$refs.video.src = ""
        this.init()
      })
    },
    //dialog关闭事件
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },
    //提交数据
    submitForm() {
      // 要从这个接口传递文件 我知道啊
      this.dialogVisible = false
      const formData = new FormData();
      //上级节点不选择就是0
      this.ruleForm.ParentId = this.ruleForm.ParentId ? this.ruleForm.ParentId : 0
      //赋值
      this.ruleForm.ID !==undefined ? formData.append('ID', this.ruleForm.ID) :"" //ID
      formData.append('ParentId', this.ruleForm.ParentId) //父级节点
      formData.append('VideoName', this.ruleForm.VideoName) //视频名称
      formData.append('VideoType', this.radiooCar) //车辆类型
      formData.append('SortID', this.ruleForm.SortID) //序号
      formData.append('files', this.submitVideo) //序号
      this.$WAPI.Ts_VideoOperation(formData).then((res) => {
        this.$message({
          message: res.data.msg,
          type: "success",
        });
        this.showVideo=false
        this.init()
      })
    },
    //清空表单
    resetForm() {
      this.$refs.ruleForm.resetFields();
      //清空文件
      this.fileList=[]
    },
    //#endregion

    //#region 上传视频
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    beforeUpload(file) {
      const isVideo = file.type === 'video/mp4';
      if (!isVideo) {
        this.$message.error('请上传视频文件');
      }
      return isVideo;
    },

    //文件上传成功时的钩子
    onSuccess(response, file, fileList) {
      this.$message.success('视频上传成功');
      // 处理上传成功后的逻辑，例如更新UI或者处理其他数据
    },
    //文件上传失败时的钩子
    onError(err, file, fileList) {
      console.log(err, file)
      this.$message.error('视频上传失败');
      // 处理上传失败后的逻辑
    },
    //改变
    handleChange(file, fileLists) {
      //文件流
      this.submitVideo = file.raw;
      //名称回显
      this.ruleForm.VideoName = this.submitVideo.name.split(".")[0]
    },
    //上传限制
    handleExceedVisio() {
      this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传！`)
    },
    //#endregion
    //正则表达
    changeInput(value) {
      this.ruleForm.SortID = value.replace(/^[0]+[0-9]{1,}|[^\d]/g, '');
    }
  },

  computed: {},
  watch: {
    filterText(val) {
      this.$refs.treeList.filter(val);
    },
  },
};
</script>

<style scoped>
.schematicDiagramIndex {
  width: 100%;
}

.video1 {
  width: 100%;
  background: transparent;
}

::v-deep .el-tree-node__content {
  color: black;
  font-size: 14px;
  font-weight: 400;
  margin: 5px;
}

::v-deep .el-tree {
  background-color: transparent;
  --el-tree-node-hover-bg-color: #b5b7b7;
  margin-top: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  background-size: 100% 100%;
}

::v-deep
.el-tree--highlight-current
.el-tree-node.is-current
> .el-tree-node__content {
  background-color: #1a518c;
  color: #fcfbfb;
}

.filter-tree {
  padding-top: 1%;
  height: 48rem;
  overflow: scroll;
}
</style>

 

案例图
表单

 

乐~~~
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 录制视频并压缩视频文件的方法
12-09
，除了可以选择文件上传之外，还可以调用摄像头来拍摄照片或者视频并上传。capture属性可以判断前置or后置摄像头。在视频播放的过程中，用canvas定时截取一张图片，然后用gif.js生成一张GIF图，从而完成前端的视频...
vue上传视频框架
weixin_45525177的博客
11-03 151
Vue.js是一种流行的JavaScript框架，它提供了一种方便的方式来设计交互式和动态的用户界面，因此Vue上传视频框架是一种非常受欢迎的技术。除了使用Vue-resource插件之外，Vue还提供其他插件和工具来实现视频上传功能。参考文章：http://blog.ncmem.com/wordpress/2023/11/03/vue%e4%b8%8a%e4%bc%a0%e8%a7%86%e9%a2%91%e6%a1%86%e6%9e%b6/总的来说，使用Vue框架实现视频上传功能非常容易。
【上传图片，文件，视频功能合集】vue-elementul简单实现上传文件，上传图片，上传视频功能【详细注释，简单易用】
seeeeeeeeeee的博客
10-19 4088
这三个功能是所有项目基本都是常用的功能上传图片，上传文件，上传视频功能我最近也是又在做上传文件的功能然后发现以前写了但是没有记录，导致又要从新弄很麻烦所以这一次直接一次把三个常用的功能代码都开个帖子记录下来，方便以后复制。 这里采用了vue-elementul来实现。主要使用了elementul内的el-upload组件完成
vue实现视频上传功能
weixin_45525177的博客
04-07 262
强大功能，支持大文件上传，超大文件上传，1G文件上传，10G文件上传，50G文件上传，100G文件上传，支持断点续传，刷新续传，刷新网页后能够继续上传，重启续传，重启浏览器，重启电脑后直传，关机续传，关闭浏览器，关闭电脑后能够继续上传。提供7*24小时技术支持服务，远程技术支持服务，1对1技术支持服务，产品更新服务，产品升级服务，开发支持服务，维护服务，开发指导，部署指导，提供文档教程，视频教程，提供手机，微信，QQ，企业微信，电子邮箱等联系方式。
vue 视频上传组件
m0_48860371的博客
10-17 82
ImgServe.uploadSingleFile(videoFile)这儿是上传到服务器的接口，替换为自己的写法即可。视频上传：（此处只是上传到暂存区，真正上传是在提交表单时）*:分开上传是为了杜绝服务器脏数据。
vue分片上传视频并转换为m3u8文件并播放
占星安啦的博客
11-09 3213
基于若依开源框架的前后端分离版本的实践，后端java的springboot，前端若依的vue2，做一个分片上传视频并分段播放的功能，因为是小项目，并没有专门准备文件服务器和CDN服务，后端也是套用的若依的上传功能。
vue中上传视频或图片或图片和文字一起到后端的解决方法
12-14
vue中上传视频或图片或图片和文字一起到后端 1.上传图片或视频： 2.图片和文字一起传： 3预览上传的图片（通过监听change事件，解析上传的图片）： 预览本地文件也可以通过HTML5的FileReader 4.文件上传，也...
SpringBoot + Vue 实现视频管理系统
04-25
- 上传视频采用 **el-upload 手动上传实现**，先将**视频名称与日期存入数据表并返回id**，**携带返回的id再次调用上传视频方法** - 视频上传后需要**截取上传视频的第一帧图片为封面图存入数据表内**（思路：使用*...
vue实现移动端input上传视频、音频
01-21
vue移动端input上传视频、音频，供大家参考，具体内容如下 html部分 现场视频 <video id=videoId controls width=100%></video> <input style=display:none; id=pop_video type=file accept=...
VUE视频教程1
09-30
本教程分为11讲，视频清晰，对于学习VUE前端编程决对是难的好资源！由于上传文件大小限制，本资资分为两个部分：视频1包括6讲;视频2包含5讲.
vue项目使用@ffmpeg/ffmpeg在客户端上传本地视频并处理的开发记录
細水、長流√的专栏
09-08 1813
目前实现的功能：处理本地，线上URL视频，视频加水印，分离音频、截取下载某一帧图片，调整输出分辨率，导出到VOD或本地，替换视频背景音。 浏览器版本请使用91，不要使用最新的，否则连测试都不行 不支持safari浏览器！！！视频文件在操作过程中使用blob地址 纯前端处理视频文件，由于文件是写在内存文件里面的，所以前端处理一些视频是没有问题的，项目最终结果差不多如下，只能处理小视频，上G的视频应该会很慢的而且机器内存可能满足不了需求。 1、安装包 2、页面上传方法功能 vue页
vue原生上传实现
JSON_J的博客
06-09 1391
vue，原生上传
vue图片上传视频
weixin_45525177的博客
11-03 189
参考文章：http://blog.ncmem.com/wordpress/2023/11/03/vue%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%e8%a7%86%e9%a2%91/使用预先开发好的组件和插件，可以快速地实现图片和视频上传功能，并且可以自定义上传成功以及失败的回调函数来满足更加复杂的需求。使用Vue Video Player Plus插件，可以在Vue中方便地实现视频上传。使用Vue Video Player插件，可以在Vue中方便地实现视频上传。
三、VUE数据代理
最新发布
D_A_I_H_A_O的博客
04-29 313
Vue中的数据代理：通过vm对象来代理data对象中属性的操作（读/写）
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 474
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
xu_duo_i的博客
04-25 392
vue+element 树形结构 改成懒加载模式(原理element有),这里只做个人理解笔记
党务学习|基于SprinBoot+vue的大学生党务学习平台(源码+数据库+文档)
伟庭的博客
04-27 668
大学生党务学习平台管理系统按照操作主体分为管理员和用户。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。大学生党务学习平台管理系统可以提高大学生党务学习平台信息管理问题的解决效率，优化大学生党务学习平台信息处理流程，保证大学生党务学习平台信息数据的安全，它是一个非常可靠，非常安全的应用程序。大学生党务学习平台管理系统；入党申请,党课Mysql数据库；Java语言。
vue 快速入门 系列 —— 玩转 CMS
ZL4120505的博客
04-29 582
例如 src/layouts/BasicLayout.less，里面包含一些基本布局的样式，被 src/layouts/BasicLayout.vue 引用，项目中使用这种布局的页面就不需要再关心整体布局的设置。好比中医发展了好几千年，许多本源的东西老中医也是不清楚的，但我们摸索出一套规则，按照这个能治病，这个就很好。.clearfix() 混合器定义了清除浮动的样式。组件相关的样式，有一些在页面中重复使用的片段或相对独立的功能，你可以提炼成组件，相关的样式也应该提炼出来放在组件中，而不是混淆在页面里。
vue报错：Do not mutate vuex store state outside mutation handlers.
weixin_44021888的博客
04-25 310
vue报错：Do not mutate vuex store state outside mutation handlers.
OSS前台vue上传视频
12-13
根据提供的引用内容，我们可以使用阿里云OSS对象存储来实现前台Vue上传视频的功能。具体步骤如下： 1.安装ali-oss插件 ```shell npm install ali-oss --save ``` 2.在Vue组件中引入ali-oss插件 ```javascript ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值