Question

extjs5.0加springMVC如何实现将文件上传到本地tomcat上

Answer 1

用 springMVC 来做项目，如果遇到文件上传，那么一定要用 spring 自带的文件处理类来处理上传的文件，因为效率实在高过其他的。
从界面传过来的参数，如果设置了值对象，那么可以从值对象里面取出字符串类型的普通参数，如果不这样做，也可以直接从 request 里面获得，两种方法都可以。
问题是如果值对象里面写了其他类型的变量，妄想像 Struts2 那样处理，springMVC 就会报出 400 Bad Request 的错误。
在 Struts2 里面，我们可以定义一个值对象为
public class ImageVo {
private String roomnumber;

private File image1 ;
private File image2 ;
　　private File image3 ;
}

然后在后台从前台传过来的值对象里面取出image1……，那就是一个文件流了，非常好处理上传文件。但 springMVC 只能接受全部为 string 类型的字符串值，那么该怎么做呢？
前台Extjs4代码：
/**
* 图片添加
* @type {Ext.form.Panel}
*/
var addImageForm = new Ext.form.Panel({
border: false, bodyPadding: 5, id: 'addImageForm',height:350,
fieldDefaults: {labelWidth: 80, labelSeparator: ": ", anchor: '95%'},

items: [
{xtype:'fieldset',title:'图片上传', collapsible:true,
items:[
{
xtype:'textfield',
fieldLabel: '房间号码',
name: 'roomnumber',
id: 'roomnumber1',
allowBlank: false,
maskRe: /[\d]/,
reegx: /[\d{4}]/,
minLength: 4,
maxLength: 4,
emptyText: '请输入四位的房间号码（前两位代表楼层，后两位代表房间号）',
regexText: '请输入正确的房间号码',
//验证该房间号码是否存在 !
listeners: {
blur: function (e, t, eOpts) {
var roomnumber = e.rawValue;
if(roomnumber.length == 4){
Ext.Ajax.request({
method: 'post',
params: {roomnumber: roomnumber},
url: '/room/findroomhold',
callback: function (options, success, response) {
var jsonString = Ext.JSON.decode(response.responseText);
if (jsonString.success) {

} else {
Ext.Msg.alert('警告', jsonString.msg);
}
}
});
}
}
}
},{
xtype:'filefield',
fieldLabel:'上传图片1',
name:'image1',
id:'image1',
buttonText:'',
buttonConfig:{iconCls:'upload'},
listeners:{
change:function(btn, value, eOpts){
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
if ( img_reg.test(value) ) {
var img = Ext.getCmp('img1');
var file = btn.fileInputEl.dom.files[0];
var url = URL.createObjectURL(file);
img.setSrc(url);
} else {
Ext.Msg.alert('提示', '请选择图片类型的文件！');
return ;
}
}
}
},{
xtype:'filefield',
fieldLabel:'上传图片2',
name:'image2',
id:'image2',
buttonText:'',
buttonConfig:{iconCls:'upload'},
listeners:{
change:function(btn, value){
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
if ( img_reg.test(value) ) {
var img = Ext.getCmp('img2');
var file = btn.fileInputEl.dom.files[0];
var url = URL.createObjectURL(file);
img.setSrc(url);
} else {
Ext.Msg.alert('提示', '请选择图片类型的文件！');
return ;
}
}
}
},{
xtype:'filefield',
fieldLabel:'上传图片3',
name:'image3',
id:'image3',
buttonText:'',
buttonConfig:{iconCls:'upload'},
listeners:{
change:function(btn, value){
var img_reg = /\.([jJ][pP][gG]){1}$|\.([jJ][pP][eE][gG]){1}$|\.([gG][iI][fF]){1}$|\.([pP][nN][gG]){1}$|\.([bB][mM][pP]){1}$/;
if ( img_reg.test(value) ) {
var img = Ext.getCmp('img3');
var file = btn.fileInputEl.dom.files[0];
var url = URL.createObjectURL(file);
img.setSrc(url);
} else {
Ext.Msg.alert('提示', '请选择图片类型的文件！');
return ;
}

}
}
}
]
},{xtype:'fieldset',title:'图片预览',layout:'column',defaults:{width:130},
items:[
{xtype:'image',id:'img1'},
{xtype:'image',id:'img2'},
{xtype:'image',id:'img3'}
]
}
],
dockedItems: [
{
xtype: 'toolbar', dock: 'bottom', ui: 'footer', layout: {pack: 'center'},
items: [
{text: '确认上传', disabled: true, formBind: true, handler: function () {
var form = this.up('form').getForm();
if (form.isValid()) {
form.submit({
url: '/image/add',
method: 'post',
submitEmptyText: false,
waitMsg: '请稍等，系统正在帮您添加',
success: function (form, action) {
//Ext.Msg.alert('成功', "上传成功！");
Ext.Msg.alert('成功', action.result.msg);
},
failure: function (form, action) {
Ext.Msg.alert('失败', action.result.msg);
//Ext.Msg.alert('失败', "上传失败");
}
})
}
}},
{text: '重置', handler: function () {
this.up('form').getForm().reset();
}}

]
}
]
});