RuoYi-Vue 前端分离版实现视频上传功能

一.前端视频部分标签代码展示如下：

 
   

   
    

   
   
     
   
   
   

   
   点击上传视频 
   

        

   

二.前端视频部分数据区域定义代码展示如下：

import { getToken } from "@/utils/auth";

data() {
  return {
    //拿到当前环境的请求前缀
    videoUpload:{
      // 设置上传的请求头部
      headers: { Authorization: "Bearer " + getToken() },
      // 上传的地址
      url: process.env.VUE_APP_BASE_API + "/video/video/uploadVideo",
      url2: process.env.VUE_APP_BASE_API,
    },
    showVideoPath: "",
    uploadUrl:"",//你要上传视频到你后台的地址
    videoFlag:false , //是否显示进度条
    videoUploadPercent:"", //进度条的进度，
    isShowUploadVideo:false //显示上传按钮
  };
},

三.前端视频部分方法区域定义的方法展示如下：

methods: {
  //上传前回调
  beforeUploadVideo (file) {
    const isLt1024M = (file.size / 1024 / 1024) < 1024;
    this.form.videoSize = file.size / 1024 / 1024;
    //判断是不是MP4格式视频
    if (['video/mp4'].indexOf(file.type) != 0) { 
        this.$message.error('请上传正确的视频格式');
        return false;
    }
    //单个视频大小限制在1024M以内
    if (!isLt1024M ) {
        this.$message.error('上传视频大小不能超过1024MB哦!');
        return false;
    }
    this.isShowUploadVideo = false;
  },

  //进度条
  uploadVideoProcess (event, file, fileList) {
      this.videoFlag = true;
      this.videoUploadPercent = file.percentage.toFixed(0) * 1;
  },

  //上传成功回调
  handleVideoSuccess (res, file) {
      this.isShowUploadVideo = true;
      this.videoFlag = false;
      this.videoUploadPercent = 0;
      if(res !=""){
          this.showVideoPath = res;
          this.form.courseUrl = res;
      } else {
          this.$message.error('视频上传失败，请重新上传！');
      }
   }
}

四.后台视频上传方法controller中代码展示如下：

提示1：上传图片和视频都可以用RuoYi中此方法，即FileUploadUtils.upload(Global.getFengMian(),file)，唯一区别不同的是图片上传和视频上传的格式不一样，MimeTypeUtils.MEDIA_EXTENSION在RuoYi代表视频格式，MimeTypeUtils.IMAGE_EXTENSION在RuoYi代表图片格式，大家可以点进方法中看看便知。

提示2：在RuoYi后台application.yml文件中，“文件上传”模块可设置单个文件和总上传文件大小，自己定义。

/**
 * 视频上传 
 * @param file
 * @return
 * @throws Exception
 */
@RequestMapping("/uploadVideo")
public String uploadVideo(@RequestParam(value = "file", required = true) MultipartFile file) throws Exception {
   String vdrul = "";
   if (file != null) {
	 try {
	    vdrul= FileUploadUtils.upload(Global.getFengMian(),file);
	 } catch (IOException e1) {
	    e1.printStackTrace();
	 }
   }
    return vdrul;
}