java ,Struts2+elementUi上传视频问题解决过程

上问题：

最近公司合作方又提新需求了，有一个老项目用的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部分也断点

 

好的，你要的都在这里了

 

再看看视频是否被存放到了本地测试目录下

 

完成