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, 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; }