无奈，记录一次成功完成vue element ui upload上传文件结合struts2的骚操作，完美解决后台无法获得上传文件的问题

首先在这里不建议大家做这样的奇葩操作

如果你们有老系统必须要做这样的改造，那是无奈之举

先看代码，这些代码是我直接从我完成的项目中提取出来的可以直接使用，不过element ui这个空间布局我稍微做了css修改，这里就不贴出css了，这些代码之后会有完整解释，我会把我这次经历一一解释清楚如何一步一步填坑

<el-upload
         class="img-upload"
         ref="upload"
         name="itemfile"
         action="uploadProductPhoto"
         :headers="headers"
         :limit="1"
         :on-preview="handlePreview"
         :on-remove="handleRemove"
         <%--:file-list="fileList"--%>
         :on-progress="beforeAvatarUpload"
         :http-request="uploadFileMethod"
         :auto-upload="false">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
      <%--<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>--%>
</el-upload>

 

var app = new Vue({
            el:'#app',
        data: {
            file: {},
         msg: '123',
//            fileList: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}, {name: 'food2.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]
            fileList:[],
            progressPercent: 0,
            headers: {
//                'Content-Type': 'application/x-www-form-urlencoded'
//                'Content-Type': 'multipart/form-data'
         },
        },
        methods: {
            uploadFileMethod:function(param) {
                const fileObject = param.file;
                const formData = new FormData();
                formData.append("itemfile", param.file);
                formData.append("Filename", $('.el-upload-list__item-name').text().trim());
                const instance = axios.create({
                    baseURL: 'uploadProductPhoto.html?jsessionid=<%=request.getSession().getId()%>',
                    timeout: 10000,
                    headers: {
                        "Content-type": "multipart/form-data"
                    },

               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: 'uploadProductPhoto.html?jsessionid=<%=request.getSession().getId()%>',
                    data: formData,
                }).then(function(res) {
                    param.onSuccess()
                    $("#errMsg").html(res.data);
                }).catch(function(err){
                    $("#errMsg").html(err.data);
                })

            },
            submitUpload:function() {
                this.loading=true;
                this.$refs.upload.submit();
            },
            handleRemove:function(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview:function(file) {
                console.log(file);
            },
         beforeAvatarUpload:function(event, file, fileList){
                var loadProgress = Math.floor(event.percent) //这就是当前上传的进度
                this.progressPercent=loadProgress;
                $(".inner-progress").text(loadProgress+"%");
//          alert(loadProgress)
                //可以进行其他逻辑
            },
        }

        })
    ;

 一，我使用的element ui上传文件控件

一开始我也是直接从element ui官网直接copy如下图这个控件

 

后台是SSH java项目 ,以前用的是

<script language="javascript" type="text/javascript" src="js/uploadify2.1.4/swfobject.js"></script>
<script language="javascript" type="text/javascript" src="js/uploadify2.1.4/jquery.uploadify.v2.1.4.min.js"></script>

是可以正常的

现在jsp页面引入vue，确实骚是不是，引入vue和element ui的控件之后

后台就存在取不到上传的文件又没有

上传文件上传到后台是一个tmp文件，后台接收到后是需要再处理的

二、如何用vue+struts2处理传值和接收过程呢

以前的struts.xml文件中存在这么一个配置

<constant name="struts.multipart.saveDir" value="/tmp" />
<constant name="struts.multipart.maxSize" value="30072243" />

这个配置是struts.multipart.saveDir" value="/tmp存放零时文件的意思，但是在上传过程中，你断点调试取出这个路劲下的文件一看，100多个.tmp文件，哪个才是我们需要的？

答案这个配置肯定可以拿到上传过来的文件

只不过这个文件乱且多，还不知道具体的文件是哪个

我放弃了这样去取tmp

经过网上查找资料得知通过

axios的post可以实现，既是网络所说的

const fd = new FormData();
fd.append('Filename:', this.file.name)

axios.post('upload.html?jsessionid=<%=request.getSession().getId()%>',fd,{
    headers: {
            "Content-type": "multipart/form-data"
              }
             }).then(function(res){
                alert("上传成功");
             })

情况并没有得到很好的解决，后台还是取不到值，最后我又找到了添加以下这行代码 ,加了这行代码原来的进度条就没有了，我这里也进行了解决

:http-request="uploadFileMethod"

具体的js方法中如下这段

       uploadFileMethod:function(param) {
           const fileObject = param.file;
           const formData = new FormData();
           formData.append("itemfile", param.file);
           formData.append("Filename", $('.el-upload-list__item-name').text().trim());
           const instance = axios.create({
               baseURL: 'uploadProductPhoto.html?jsessionid=<%=request.getSession().getId()%>',
               timeout: 10000,
               headers: {
                   "Content-type": "multipart/form-data"
               },

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: 'uploadProductPhoto.html?jsessionid=<%=request.getSession().getId()%>',
               data: formData,
           }).then(function(res) {
               param.onSuccess()
               $("#errMsg").html(res.data);
           }).catch(function(err){
               $("#errMsg").html(err.data);
           })

       }

文件我通过formData.append("itemfile", param.file);

文件名称我通过

formData.append("Filename", $('.el-upload-list__item-name').text().trim());

设置进去

 

后台

HttpServletRequest request = ServletActionContext.getRequest();
MultiPartRequestWrapper req = (MultiPartRequestWrapper) request;
File[] itemfiles = req.getFiles("itemfile");

this.itemfileFileName = req.getParameter("Filename");

 

最后断点得到如下结果

 

后台为什么能拿到这些呢？因为这个action类他实现了

 implements ServletResponseAware, ServletRequestAware,
      SessionAware

以上几个类

 

最终结果