ExtJs上传中文文件名乱码,观察请求。
ExtJs6上传乱码从后台无法解决,因为文件名请求里面就已经乱码了,后台无法解码。
除非请求参数正确没有乱码,后台因为编码设置不一样,可以通过后台处理乱码
这里的思路使用ExtJs的Form隐藏域。
前端使用Base64加密,后台用Base64解密。
这里加密的时间很巧妙,发送请求前文件名并未乱码,把这个取出来用Base64加密(乱码的加密成Base64是徒劳的)
放入空的form里面,带给后台
/**
* @author cjy
* @Date 2018/6/5 9:47.
*/
Ext.define('Admin.view.eduQuestion.ExcelImportForm', {
extend: 'Ext.window.Window',
xtype: 'excelImportForm',
title: '导入表格',
requires: [
'Admin.view.eduQuestion.ExcelImportFormController',
'Ext.form.Panel',
'Ext.form.field.ComboBox',
'Ext.form.field.Text',
'Ext.form.field.TextArea',
'Ext.layout.container.Fit'
],
layout: 'fit',
modal: true,
height: 200,
width: 370,
controller: 'excelImportForm',
items: [{
flex: 1,
xtype: 'form',
reference: 'form',
modelValidation: true,
defaults: {
labelAlign: 'left',
margin: 10,
msgTarget: 'side'
},
items: [{
xtype: 'textfield',
hidden:true,
name:'fileName',
id:'fileName'
},{
xtype: 'filefield',
name: 'excelPath',
id:'excelPath',
fieldLabel: '表格',
labelWidth: 50,
msgTarget: 'side',
anchor: '100%',
accept: 'xls/xlsx',
buttonText: '选择Excel表格...',
validator: function (value) {
if(value==''){
return true;
}
var arr = value.split('.');
if (arr[arr.length - 1] == 'xls' || arr[arr.length - 1] == 'xlsx') {
return true;
} else {
return '必须选择xls或者xlsc格式的Excel!';
}
}
}]
}],
buttons: [{
text: '确定',
handler: 'editExcel'
}, {
text: '取消',
handler: 'closeWindow'
}]
});
在Controller.js里面对form进行操作,关键代码已标红
/**
* @author cjy
* @Date 2018/6/5 9:47.
*/
Ext.define('Admin.view.eduQuestion.ExcelImportFormController', {
extend: 'Admin.view.BaseViewController',
alias: 'controller.excelImportForm',
/**Excel上传
* @param {Ext.button.Button} component
* @param {Event} e
*/
editExcel: function () {
var me = this,
window = me.getView(),
form = window.down('form');
if (!form.isValid()) {
return false;
}
var ff = Ext.getCmp('excelPath')
var ffv = ff.getValue('filename')
var index = ffv.lastIndexOf('\\')
var ffv = Ext.util.Base64.encode(ffv.substring(index 1,ffv.length))
Ext.getCmp('fileName').setValue(ffv);
if (window.action === 'uploadExcel') {
successMsg = '上传成功';
submitUrl=Common.Config.requestPath('EduQuestion', 'importExcelForEduQuestion');
} else {
Ext.Msg.alert('温馨提示', '表单操作错误,请联系管理员');
return;
}
form.submit({
//method : 'get',默认是post,指定没用
url: submitUrl,
waitMsg: '正在上传Excel并导入,请稍等...',
success: function(fp, o) {
Common.util.Util.toast(successMsg);
me.getView().close();
},
failure: function(form, action) {
Common.util.Util.toast(successMsg);
me.getView().close();
}
});
},
/**关闭 userWindow
* @param {Ext.button.Button} component
* @param {Event} e
*/
closeWindow: function () {
this.getView().close();
}
});
后台接收,本来只用MultipartFile就可以接收到文件名和文件内容,现在需要两个参数,一个接收文件名,另一个接收文件内容
@RequestMapping(value = "/importExcelForEduQuestion")
@ResponseBody
//@RequiresPermissions("eduQuestionBank:importExcelForEduQuestion")
public Map<String,Object> importExcelForEduQuestion(@RequestParam("excelPath") MultipartFile file,@RequestParam("fileName") String fileName) throws IOException {
//如果文件不为空,写入上传路径
if(!file.isEmpty()) {
//上传文件路径
//上传文件名
BASE64Decoder decoder = new BASE64Decoder();
String filename = new String(decoder.decodeBuffer(fileName),"UTF-8");
FileToolUtil.ifCreateNewFile(UPLOADED_FILE_PATH,filename);
//将上传文件保存到一个目标文件当中
try {
file.transferTo(new File(UPLOADED_FILE_PATH File.separator filename));
} catch (IOException e) {
e.printStackTrace();
return ResultUtil.createFailResult("上传失败");
}
return ResultUtil.createSuccessResult();
} else {
return ResultUtil.createFailResult("上传文件为空");
}
}
补充文件FoolUtil里的方法
public static File createNewFile(String pathFileName) throws IOException {
File outFile = new File(pathFileName);
File parentFile = outFile.getParentFile();
if (!parentFile.exists()){
parentFile.mkdirs();//不存在则创建父目录
}
if(!outFile.exists()) {
outFile.createNewFile();
}
return outFile;
}