上问题:
最近公司合作方又提新需求了,有一个老项目用的ssh,要有微信小程序,小程序还要有视频功能,而且,这个项目的管理系统的前端用的是vue+element ui
到底是 有钱人会玩啊!这种技术栈组合也能想得出来!!!!!
又因为我为了挣钱,且只为解决问题而生的信念
所以有
解决过程:
先看看我写的element ui部分
html
<el-form-item label="视频上传" prop="Video">
<!-- action必选参数, 上传的地址 -->
<el-upload class="avatar-uploader el-upload--text"
action="#"
:show-file-list="false"
:on-success="handleVideoSuccess"
:before-upload="beforeUploadVideo"
:http-request="uploadVideoMethod"
:on-progress="uploadVideoProcess">
<video v-if="videoForm.Video !='' && videoFlag == false" :src="videoForm.Video" class="avatar" controls="controls">您的浏览器不支持视频播放</video>
<i v-else-if="videoForm.Video =='' && videoFlag == false" class="el-icon-plus avatar-uploader-icon"></i>
<el-progress v-if="videoFlag == true" type="circle" :percentage="videoUploadPercent" style="margin-top:30px;"></el-progress>
</el-upload>
<P class="text">请保证视频格式正确,且不超过10M</P>
</el-form-item>
其中关键点在于
action="#"和:http-request="uploadVideoMethod"
一般现在springmvc中这部分的用法是:action="接口地址",无需再加入:http-request="uploadVideoMethod"部分
现在struts2框架就是action="#"和:http-request="uploadVideoMethod"
action省略掉,将上传动作交给uploadVideoMethod方法去完成
js
其中instance()部分和axios.create()部分有重合的代码,大家可以优化或者直接借鉴使用
uploadVideoMethod:function(param) {
const videoObject = param.file;
const formData = new FormData();
formData.append("videoFiles", videoObject.file);
formData.append("videoFileNames",videoObject.name );
const instance = axios.create({
timeout: 10000,
onUploadProgress: function(progressEvent) {
var percent=(progressEvent.loaded / progressEvent.total * 100) | 0
//调用onProgress方法来显示进度条,需要传递个对象 percent为进度值
param.onProgress({percent:percent})
}
});
instance({
method: 'post',
headers: {
"Content-type": "multipart/form-data"
},
url: 'uploadVideo.html?jsessionid=<%=request.getSession().getId()%>',
data: formData,
}).then(function(res) {
// param.onSuccess()
}).catch(function(err){
})
},
java
struts.xml文件中配置如下,其中
uploadVideo为页面js请求的路劲地址
即url: 'uploadVideo.html?jsessionid=<%=request.getSession().getId()%>',
<action name="uploadVideo" class="com.globex.supplier.action.UploadFileAction" method="uploadVideo">
<result type="json">
<param name="root">videoVO</param>
</result>
</action>
加入一个action类接口
再在类中加入接口方法,处理保存上传视频文件的逻辑
/**
* 上传视频
* @return
*/
public String uploadVideo(){
HttpServletRequest request = ServletActionContext.getRequest();
MultiPartRequestWrapper req = (MultiPartRequestWrapper) request;
File[] videoFiles = req.getFiles("videoFiles");
String videoFileNames = req.getParameter("videoFileNames");
String imCode = req.getParameter("0");
if(StringUtils.isNotEmpty(imCode)){
imageVO.setImCode(imCode);
}
if(videoFiles.length>0&&(videoFileNames!=null&&!"".equals(videoFileNames))){
this.fileFileName=videoFileNames;
this.file=videoFiles[0];
}
//测试路劲
String saveFilePath="E:/lexiaoVideo";
File file = new File(saveFilePath);
// 如果指定的路径没有就创建
if (!file.exists()) {
file.mkdirs();
}
File target = new File(saveFilePath,fileFileName);
try {
FileUtils.copyFile(this.file,target);
} catch (IOException e) {
e.printStackTrace();
}
imageVO.setFilePath(saveFilePath);
return SUCCESS;
}
代码和配置已经写好
测试一下
前端谷歌浏览器在source下我们可以来一个断点
后台java部分也断点
好的,你要的都在这里了
再看看视频是否被存放到了本地测试目录下
完成