Springboot+vue实现上传视频并在线播放功能

package com.songguoliang.springboot.controller;import com.songguoliang.springboot.domain.ResponseBean;import org.slf4j.Logger;import org.slf4j.LoggerFactory;import org.springframework.stereotype.Controller;import org.springframework.web.bind.annotation.*;import org.springframework.web.multipart.MultipartFile;import javax.servlet.http.HttpServletRequest;import java.io.File;import java.io.IOException;/** * 上传文件 */@CrossOrigin(origins = "*",maxAge = 3600)@Controllerpublic class UploadController {    private static final Logger LOGGER = LoggerFactory.getLogger(UploadController.class);    @GetMapping("/upload")    public String upload() {        return "upload";    }    @PostMapping("/upload")    @ResponseBody    public ResponseBean upload(@RequestParam("file") MultipartFile file,HttpServletRequest request) {        String filePath = request.getSession().getServletContext().getRealPath("/uploadFile/");        File dir = new File(filePath);        if (!dir.isDirectory()) {//文件目录不存在，就创建一个            dir.mkdirs();        }        if (file.isEmpty()) {            return ResponseBean.error("上传失败，请选择文件",null);        }        String fileName = file.getOriginalFilename();        String ext = fileName.substring(fileName.lastIndexOf("."));        String newFileName = System.currentTimeMillis() + ext;        File dest = new File(filePath + File.separator + newFileName);        try {            file.transferTo(dest);            LOGGER.info("上传成功");            String url =  request.getScheme() +"://" + request.getServerName()                    + ":" +request.getServerPort() + "/uploadFile/";            return ResponseBean.success("上传成功", url  + newFileName);        } catch (IOException e) {            LOGGER.error(e.toString(), e);        }        return ResponseBean.error("上传失败",null);    }}

 # 上传文件总的最大值spring.servlet.multipart.max-request-size=30MB# 单个文件的最大值spring.servlet.multipart.max-file-size=100MB## jspspring.mvc.view.prefix=/WEB-INF/jsp/spring.mvc.view.suffix=.jsp

<template>  <div class>    <h3>上传视频h3>    <el-upload      class="avatar-uploader el-upload--text"      :action="uploadUrl"      :show-file-list="false"      accept=".mp4"      :on-success="handleVideoSuccess"      :before-upload="beforeUploadVideo"      :on-progress="uploadVideoProcess"    >      <video        v-if="showVideoPath != '' && !videoFlag"        :src="showVideoPath"        poster="https://p3-dy.byteimg.com/img/tos-cn-p-0015/6b0ac3f1d60c4a318b69d00f4cc125ff~c5_300x400.jpeg?from=2563711402_large"        type="video/mp4"        class="avatar video-avatar"        controls="controls"        preload="auto"      >        您的浏览器不支持视频播放      video>            <el-progress        v-if="videoFlag == true"        type="circle"        :percentage="videoUploadPercent"        style="margin-top:30px;"      >el-progress>      <el-button        type="primary"        class="video-btn"        slot="trigger"        size="small"        v-if="isShowUploadVideo"      >        选取文件<i class="el-icon-upload el-icon--right">i      >el-button>    el-upload>    <P v-if="isShowUploadVideo" class="text"      >请保证视频格式是.mp4，且不超过20MP    >  div>template>
<script>import axios from "axios";export default {  props: {},  data() {    return {      form: {},      uploadUrl: "http://localhost:8080/upload", //你要上传视频到你后台的地址      videoShow:true,      videoFlag: false, //是否显示进度条      videoUploadPercent: "", //进度条的进度，      isShowUploadVideo: true, //显示上传按钮      showVideoPath: "" // 视频地址      // showVideoPath: "https://aweme.snssdk.com/aweme/v1/playwm/?video_id=v0200fed0000bsgf4g46hqrc1h8adp50&ratio=720p&line=0" // 视频地址    };  },  mounted() {},  methods: {    //上传前回调    beforeUploadVideo(file) {      const isLt20M = file.size / 1024 / 1024 < 20;      if (["video/mp4"].indexOf(file.type) == -1) {        //'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'        this.$message.error("请保证视频格式是.mp4哦!");        return false;      }      if (!isLt20M) {        this.$message.error("上传视频大小不能超过20MB哦!");        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.errorCode == "0") {        this.showVideoPath = res.data;      } else {        this.$message.error("视频上传失败，请重新上传！");      }    }  }};script>
<style scoped lang="scss">.avatar {  width: 300px;  height: 300px;}style>

import Vue from 'vue'
import 'normalize.css/normalize.css' // A modern alternative to CSS resets
import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'import locale from 'element-ui/lib/locale/lang/en' // lang i18n
import '@/styles/index.scss' // global css
import App from './App'import store from './store'import router from './router'
import '@/icons' // iconimport '@/permission' // permission control
/** * If you don't want to use mock-server * you want to use MockJs for mock api * you can execute: mockXHR() * * Currently MockJs will be used in the production environment, * please remove it before going online ! ! ! */if (process.env.NODE_ENV === 'production') {  const { mockXHR } = require('../mock')  mockXHR()}
// set ElementUI lang to ENVue.use(ElementUI, { locale })// 如果想要中文版 element-ui，按如下方式声明// Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({  el: '#app',  router,  store,  render: h => h(App)})