首先在这里不建议大家做这样的奇葩操作
如果你们有老系统必须要做这样的改造，那是无奈之举
先看代码，这些代码是我直接从我完成的项目中提取出来的可以直接使用，不过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以上几个类
最终结果
