前端

简介: 前端
<el-form-item label="上传视频">
          <el-upload
            :on-success="handleVodUploadSuccess"
            :on-remove="handleVodRemove"
            :before-remove="beforeVodRemove"
            :on-exceed="handleUploadExceed"
            :file-list="fileList"
            :action="BASE_API + '/eduvod/video/uploadAliyunVideo'"
            :limit="1"
            class="upload-demo"
          >
            <el-button size="small" type="primary">上传视频</el-button>
            <el-tooltip placement="right-end">
              <div slot="content">
                最大支持1G,<br />
                支持3GP、ASF、AVI、DAT、DV、FLV、F4V、<br />
                GIF、M2T、M4V、MJ2、MJPEG、MKV、MOV、MP4、<br />
                MPE、MPG、MPEG、MTS、OGG、QT、RM、RMVB、<br />
                SWF、TS、VOB、WMV、WEBM 等视频格式上传
              </div>
              <i class="el-icon-question" />
            </el-tooltip>
          </el-upload>
        </el-form-item>
      video: {
        id: "",
        chapterId: "",
        courseId: "",
        title: "",
        sort: 0,
        isFree: 0,
        videoSourceId: "",
        videoOriginalName: "", //视频名称
      },
      formLabelWidth: "120px",
      fileList: [], //上传文件列表
      BASE_API: process.env.BASE_API, // 接口API地址

此处注意fileList的数组格式是:

image.png

method

// ========================上传视频==============================
    beforeVodRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}?`);
    },
    //删除视频
    handleVodRemove(file, fileList) {
      console.log(file);
      vod.removeAlyVideo(this.video.videoSourceId).then((response) => {
        this.$message({
          type: "success",
          message: response.message,
        });
        
        this.fileList = []
        this.video.videoSourceId = ''
        this.video.videoOriginalName = ''
      });
    },
    //成功回调
    handleVodUploadSuccess(response, file, fileList) {
      this.video.videoSourceId = response.data.videoId;
      this.video.videoOriginalName = file.name;
      this.fileList = fileList
    },
    //如果上传多于一个视频
    handleUploadExceed(files, fileList) {
      this.$message.warning("想要重新上传视频,请先删除已上传的视频");
    },
import request from '@/utils/request'
const api_name = '/eduvod/video'
//根据videoid 删除云端视频
export default {
  removeAlyVideo(videoId) {
    return request({
      url: `${api_name}/removeAlyVideo/`+videoId,
      method: 'delete'
    })
  },
 
}

测试

image.png

相关文章
|
6月前
|
前端开发
前端必看的8个HTML+CSS技巧 (2)
前端必看的8个HTML+CSS技巧 (2)
|
6月前
|
前端开发 JavaScript 测试技术
前端 (3)
前端 (3)
27 0
|
6月前
|
前端开发 程序员 数据处理
关于前端的一些
关于前端的一些
43 1
|
6月前
|
移动开发 前端开发 JavaScript
前端
前端
50 0
|
6月前
|
SQL 安全 前端开发
前端安全方面
前端安全方面
50 0
|
编解码 移动开发 前端开发
什么是前端?
一、什么是前端 前端是指网页开发中与用户交互直接相关的部分,包括网页的设计、布局、交互以及与后端进行数据交互的功能。前端开发主要使用HTML、CSS和JavaScript等技术来实现网页的展示和交互功能。前端开发人员通常负责将设计师提供的网页设计转化为网页代码,并与后端开发人员进行协作,实现网页的功能和数据交互。前端开发的目标是提供用户友好的界面和良好的用户体验。 二、前端的特点 前端开发具有以下几个特点: 1. 用户界面设计:前端开发主要负责网页的设计和布局,包括页面的样式、排版、色彩等,以及用户交互的设计。前端开发人员需要具备一定的美学和设计能力,以提供用户友好的界面和良好的用户体验。
286 0
|
6月前
|
前端开发 JavaScript
前端必看的8个HTML+CSS技巧 (1)
前端必看的8个HTML+CSS技巧 (1)
|
编解码 移动开发 前端开发
什么是前端,前端是什么?
什么是前端,前端是什么?
180 0
|
Web App开发 前端开发 JavaScript
纯前端实现视频混流
随着前端音视频技术的不断成熟越来越多的直播平台开始提供网页开播的直播方式,不需要再使用 OBS 或者各家的直播伴侣。
546 0
|
前端开发 JavaScript UED
关于前端的一些思考
前端开发作为Web前端的重要组成部分,越来越受到关注。为了在竞争激烈的市场中脱颖而出,我们需要不断创新并进行原创性的开发。
99 0
下一篇
无影云桌面