el-upload上传文件实现视频上传

news/2024/7/10 3:17:28 标签: el-upload, vue

在这里插入图片描述
上传成功后,下面的滚动条和文件名消失

 <el-form-item label="上传视频" prop="videoPath" :required="videoTo">
          <el-upload
            ref="video"
            class="upload-demo"
            v-model="form.videoPath"
            drag
            action="/api/EToolFile"
            :multiple="false"
            :before-upload="beforeUploadVideo"
            :http-request="UploadVideo"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">
              将文件拖到此处,或<em>点击上传</em>
            </div>
          </el-upload>
          //进度条
          <el-progress
            v-show="progressFlag"
            :percentage="loadProgress"
          ></el-progress>
</el-form-item>
 return {
      progressFlag: false,
      loadProgress: 0,
     }

method中的方法

//视频上传
    UploadVideo(params) {
      this.form.videoPath = URL.createObjectURL(params.file);
      this.progressFlag = true;
      this.loadProgress = 0;
      const interval = setInterval(() => {
        if (this.loadProgress >= 99) {
          clearInterval(interval);
          return;
        }
        this.loadProgress += 1;
      }, 20);
      upload("/api/EToolFile", params.file).then((res) => {
        console.log(res);
        this.form.videoPath = res.data.data.name;
        this.progressFlag = false;
        this.loadProgress = 100;
        this.$message({
          type: "success",
          message: "上传成功!",
        });
        // 清空上传列表
        this.$refs.video.clearFiles();
      });
    },
    beforeUploadVideo(file) {
      const isLt30M = file.size / 1024 / 1024 < 30;
      if (
        [
          "video/mp4",
          "video/ogg",
          "video/flv",
          "video/avi",
          "video/wmv",
          "video/rmvb",
        ].indexOf(file.type) == -1
      ) {
        this.$message.error("请上传正确的视频格式");
        return false;
      }
      if (!isLt30M) {
        this.$message.error("上传视频大小不能超过30MB哦!");
        return false;
      }
    },

http://www.niftyadmin.cn/n/519571.html

相关文章

xftp连接linux

首先配置linux网络&#xff0c; 取消注释&#xff0c;进入文件 vi /etc/ssh/sshd_config去掉前面的#号 # Authentication: LoginGraceTime 2rm PermitRootLogin yes StrictModes yes然后配置电脑上虚拟机网络地址 参考链接&#xff1a; VMnet8配置 如果是ssh拒绝了密码&…

springboot整合security,swagger2页面

在这里插入代码片引入依赖 <dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger-ui</artifactId><version>2.6.1</version></dependency><dependency><groupId>io.springfox</groupId&…

面试中的Singleton

引子 “请写一个Singleton。”面试官微笑着和我说。 “这可真简单。”我心里想着&#xff0c;并在白板上写下了下面的Singleton实现&#xff1a; 1 class Singleton2 {3 public:4 static Singleton& Instance()5 {6 static Singleton singleton;7 …

uniapp项目的map组件生成地图显示

需要腾讯地图服务商 SDK 配置配置&#xff1a; 1.首先需要获取腾讯地图的秘钥 打开腾讯位置服务&#xff1a; https://lbs.qq.com/ 点击右上角创建应用 创建之后点击右上角添加key: 述 填入key名称和验证码之后&#xff0c;点击确定。 2.打开manifest.json 3.点击h5配置&a…

K-Means 算法

最近在学习一些数据挖掘的算法&#xff0c;看到了这个算法&#xff0c;也许这个算法对你来说很简单&#xff0c;但对我来说&#xff0c;我是一个初学者&#xff0c;我在网上翻看了很多资料&#xff0c;发现中文社区没有把这个问题讲得很全面很清楚的文章&#xff0c;所以&#…

npm install安装失败 error D:\xxx\xxx\node_modules\node-sass: Command failed. Exit code: 1

报错完整信息如下&#xff1a; error D:\xxx\xxx\node_modules\node-sass: Command failed. Exit code: 1 Command: node scripts/build.js Arguments: Directory: D:\xxx\xxx\node_modules\node-sass Output: Binary found at D:\software\nodesass\win32-x64-72_binding.nod…

ubuntu 安装pip

安装pip的方法&#xff1a;Install pip and virtualenv for Ubuntu 10.10 Maverick and newer$ sudo apt-get install python-pip python-dev build-essential $ sudo pip install --upgrade pip $ sudo pip install --upgrade virtualenv

从K近邻算法、距离度量谈到KD树、SIFT+BBF算法

原文出自&#xff1a;http://blog.csdn.net/v_JULY_v/article/details/8203674 前言 前两日&#xff0c;在微博上说&#xff1a;“到今天为止&#xff0c;我至少亏欠了3篇文章待写&#xff1a;1、KD树&#xff1b;2、神经网络&#xff1b;3、编程艺术第28章。你看到&#xff0…