Vue+SpringBoot使⽤ElementUIel-upload实现视频带参数上传（前。。。Vue+Spring Boot使⽤ElementUI el-upload实现视频带参数上传(前后端代码详解）
前⾔
在百度上看到很多博主谈起Element UI el-upload⼤多都是对官⽹已有内容进⾏搬运，也仅限前端实现，⽆后端操作，更⽆扩展性讲解，千篇⼀律，枯燥⽆⽤，因此今天我给⼤家讲些有⽤的，如何实现前端带参数上传视频并接收后端返回的保存路径，后端接收保存前端上传视频并返回保存路径。⾄于Element UI如何引⽤，如果你还不会的话，请移步⾄。
Vue实现带参数视频上传
这⾥先解释下el-upload组件的⼏个参数含义：
drag： 是否有拖拽框
action：前后端交互的接⼝
data：上传所带的参数
on-success：⽂件上传成功时的钩⼦
vue element admin
before-upload：上传⽂件之前的钩⼦，参数为上传的⽂件
on-progress：⽂件上传时的钩⼦
<template>
<div class="test2">
<el-upload
class="avatar-uploader el-upload--text"
:drag="{Plus}"
action="localhost:8443/api/uploadVidoe3"
multiple
:show-file-list="false"
:data="{SavePath: this.Path.url}"
:
on-success="handleVideoSuccess"
:before-upload="beforeUploadVideo"
:on-progress="uploadVideoProcess">
<i v-if="Plus"class="el-icon-upload"></i>
<div v-if="Plus"class="el-upload__text">将⽂件拖到此处，或<em>点击上传</em></div>
<el-progress v-if="videoFlag == true" type="circle":percentage="videoUploadPercent" ></el-progress>
<div class="el-upload__tip" slot="tip">只能上传mp4/flv/avi⽂件，且不超过300M</div>
</el-upload>
</div>
</template>
<script>
export default{
name:'test2',
data(){
return{
videoForm:{
videoId:'',
videoUrl:''
},
videoFlag:false,
Plus:true,
Path:{
url:'F:/video/videoUpload'
},
videoUploadPercent:0
}
},
mounted:function(){
},
methods:{
// 视频上传前执⾏
// 视频上传前执⾏
beforeUploadVideo(file){
const isLt300M = file.size /1024/1024<300
if(['video/mp4','video/ogg','video/flv','video/avi','video/wmv','video/rmvb'].pe)===-1){ this.$('请上传正确的视频格式')
return false
}
if(!isLt300M){
this.$('上传视频⼤⼩不能超过300MB哦!')
return false
}
},
// 视频上传过程中执⾏
uploadVideoProcess(event, file, fileList){
this.Plus =false
this.videoFlag =true
this.videoUploadPercent = Fixed(0)
},
// 视频上传成功是执⾏
handleVideoSuccess(res, file){
this.Plus =false
this.videoUploadPercent =100
console.log(res)
// 如果为200代表视频保存成功
sCode ==='200'){
/
/ 接收视频传回来的名称和保存地址
// ⾄于怎么使⽤看你啦~
this.videoForm.videoId = wVidoeName
this.videoForm.videoUrl = res.VideoUrl
this.$message.success('视频上传成功！')
}else{
this.$('视频上传失败，请重新上传！')
}
}
}
}
</script>
Spring Boot接收参数并保存视频
@PostMapping(value = “/api/uploadVidoe3”) 这⾥接⼝与前端保持⼀致
//导包
import java.io.File;
import java.util.*;
import org.springframework.web.bind.annotation.*;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Controller;
//实现接收的⽅法
@CrossOrigin
@PostMapping(value ="/api/uploadVidoe3")
@ResponseBody
public Map<String,String>savaVideotest(@RequestParam("file") MultipartFile file,@RequestParam String SavePath)            throws IllegalStateException {
Map<String,String> resultMap =new HashMap<>();
try{
//获取⽂件后缀，因此此后端代码可接收⼀切⽂件，上传格式前端限定
String fileExt = OriginalFilename().OriginalFilename().lastIndexOf(".")+1) .toLowerCase();
// 重构⽂件名称
System.out.println("前端传递的保存路径："+SavePath);
String pikId =UUID.randomUUID().toString().replaceAll("-","");
String newVidoeName = pikId +"."+ fileExt;
System.out.println("重构⽂件名防⽌上传同名⽂件："+newVidoeName);
//保存视频
File fileSave =new File(SavePath, newVidoeName);
//构造Map将视频信息返回给前端
//视频名称重构后的名称
resultMap.put("newVidoeName",newVidoeName);
//正确保存视频则设置返回码为200
resultMap.put("resCode","200");
/
/返回视频保存路径
resultMap.put("VideoUrl",SavePath +"/"+ newVidoeName);
return  resultMap;
}catch(Exception e){
e.printStackTrace();
//保存视频错误则设置返回码为400
resultMap.put("resCode","400");
return  resultMap ;
}
}
如果你想限制上传⼤⼩，在spring boot主程序中添加下⾯的⽂件上传配置
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication; import org.springframework.boot.web.servlet.MultipartConfigFactory; import t.annotation.Bean;
import org.springframework.util.unit.DataSize;
import javax.servlet.MultipartConfigElement;
@SpringBootApplication
public class WuwenjunApplication {
public static void main(String[] args){
SpringApplication.run(WuwenjunApplication.class, args);
}
/**
* ⽂件上传配置
* @return
*/
@Bean
public MultipartConfigElement multipartConfigElement(){
MultipartConfigFactory factory =new MultipartConfigFactory();
//单个⽂件最⼤
factory.setMaxFileSize(DataSize.parse("400MB"));//KB,MB /// 设置总上传数据总⼤⼩
factory.setMaxRequestSize(DataSize.parse("400MB"));
ateMultipartConfig();
}
}
实现效果
视频上传前Vue前端
视频上传中Vue前端
视频上传成功后Vue前端
前端收到后端返回值为
视频上传成功后Spring Boot后端

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。