完美解决ExtJs6上传中文文件名乱码,后端SpringMVC

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

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值