zoukankan      html  css  js  c++  java
  • 完美解决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,
         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;
        }
  • 相关阅读:
    第二章 成员、变量和常量
    Roman To Integer
    Integer To Roman
    Container With Most Water
    搜狗2015前端工程师笔试题
    从网易与淘宝的font-size思考前端设计稿与工作流
    移动端web app自适应布局探索与总结
    CSS 常用代码
    利用 HTML 和 CSS 实现常见的布局
    CSS 尺寸单位
  • 原文地址:https://www.cnblogs.com/Java-Starter/p/9141019.html
Copyright © 2011-2022 走看看