前端

简介: 前端
<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

相关文章
|
7月前
|
移动开发 前端开发 JavaScript
大前端时代
大前端时代
105 1
|
7月前
|
前端开发
前端必看的8个HTML+CSS技巧 (2)
前端必看的8个HTML+CSS技巧 (2)
|
6月前
|
资源调度 前端开发 JavaScript
|
7月前
|
前端开发 程序员 数据处理
关于前端的一些
关于前端的一些
46 1
|
7月前
|
移动开发 前端开发 JavaScript
前端
前端
52 0
|
编解码 移动开发 前端开发
什么是前端?
一、什么是前端 前端是指网页开发中与用户交互直接相关的部分,包括网页的设计、布局、交互以及与后端进行数据交互的功能。前端开发主要使用HTML、CSS和JavaScript等技术来实现网页的展示和交互功能。前端开发人员通常负责将设计师提供的网页设计转化为网页代码,并与后端开发人员进行协作,实现网页的功能和数据交互。前端开发的目标是提供用户友好的界面和良好的用户体验。 二、前端的特点 前端开发具有以下几个特点: 1. 用户界面设计:前端开发主要负责网页的设计和布局,包括页面的样式、排版、色彩等,以及用户交互的设计。前端开发人员需要具备一定的美学和设计能力,以提供用户友好的界面和良好的用户体验。
292 0
|
JavaScript 前端开发 API
前端攻坚战
前端攻坚战
|
编解码 移动开发 前端开发
什么是前端,前端是什么?
什么是前端,前端是什么?
182 0
|
缓存 小程序 前端开发
每天几个前端小知识
每天几个前端小知识
63 0
|
前端开发
前端,理解this
前端,理解this
67 0