VUE与Struts2传输文件|VUE上传文件到Struts2
问题起因
· · 公司有一个老Web项目,是很久以前用Struts2开发的,现在要将这个Web项目开发一个微信端,所以微信项目前端使用了Vue,而后端依旧使用以前的Struts2接口代码。
· · 在开发过程中遇到了在前端Vue上传的文件在后端Struts2中接收不到的问题,由于Vue+Struts2这种组合实在奇葩,这个问题也百度不到,经过两周的各种修改,终于解决了这个问题。
解决方案
· · 为解决此问题,试用了各种方案,其中包括修改axios设置multipart/form-data、尝试直接提交表单、使用其他UI提供文件上传功能、修改后端接收文件类型、修改Struts2拦截器相关设置等等… 均无法解决问题,由于对Struts2也没有深入的了解,不清楚到底是哪个环节出了问题。
· ·在其中某次尝试中了解到了Struts2在XML中有一个设置<constant name="struts.multipart.saveDir"/>
,这个用来设置上传文件的临时保存地址,在测试中发现Vue中上传的文件会保存到设置的saveDir目录下,只不过保存文件的名称变成了一串自动生成的字符,类型也变成了临时文件.tmp,结束文件上传后此临时文件就会被删掉。
· · 不过这问题不大,修改文件拓展类型之后文件能完美还原成原来的文件,所以在后端原本的接收文件方法代码中写一个读取临时文件并将其保存到指定目录的代码,此时文件就被保存起来了,不用担心方法结束后被删掉。
· · 为了解决临时文件文件名和文件类型获取不到的问题,在前端Vue中使用axios嵌套,即第一个axios用来上传文件,在他的回调函数中再写一个axios用来上传文件名和文件类型,在从后端取到刚才保存的文件,为其改名。
· · 上传完文件之后一定要删除保存的临时文件,防止占用磁盘空间。
相关代码
/9/28修改 删除相关代码,思路已经写得挺清晰了,看懂了的自然能写出来。