ExtJs上传文件

        最近项目用到了ExtJs6.0.2版本，比现在主流的ExtJS框架都要前沿。

        我之前用的是EasyUI上传的工作流部署的压缩文件，现在想用ExtJs来做。

        废话不多说，上明码。

        关于Ext.form.Panel相关的属性，我就不多说什么了，自己查询API文档即可。

        重点在于按钮，bottons中，点击按钮触发的事件，那里定义了form的属性。

        其中有两条属性十分关键，第一条是method属性，第二条是enctype属性，早上因为没有加上enctype属性，导致Controller中的接收的参数总是为空。method="post",enctype="multipart/form-data"。

        当然了，上传文件的那个input标签的 name属性，值要与Controller中的接收参数一致，

        这里的值是 name='deployFile'

        这里最大的教训就是，当时考虑到了enctype属性，但是把它的属性误理解为了Ext.form.Panel的属性了，后来才反应过来，enctype这个属性，它应该是form表单的属性，所以在form提交的JS里面添加上去，NullPointerException解决。

        前端JS代码如下

 /********************上传工作流Zip******************************/
        Ext.create('Ext.form.Panel', {
            title: '部署工作流Zip压缩包',
            width: 400,
            bodyPadding: 10,
            frame: true,
            renderTo: Ext.getBody(),
            items: [{
                xtype: 'filefield',
                name: 'deployFile',
                fieldLabel: '压缩文件',
                labelWidth: 60,
                msgTarget: 'side',
                fileUpload: true,
                allowBlank: false,
                anchor: '100%',
                buttonText: '请选择压缩包位置'
            }],

            buttons: [{
                text: '上传部署',
                buttonAlign: 'center',
                handler: function () {
                    var form = this.up('form').getForm();
                    if (form.isValid()) {
                        form.submit({
                            method: 'post',
                            enctype: "multipart/form-data",
                            url: '<c:url value="/actions/deploy/add"/>',
                            waitMsg: '正在上传中...',
                            success: function (fp, o) {
                                Ext.Msg.alert('Success', '部署成功');
                            },
                            failure: function (form, action) {
                                Ext.Msg.alert('部署失败', action.result.reason);
                            }
                        });
                    }
                }
            }]
        });

        效果如下：

        后台Controller接收代码：

        

    @RequestMapping(value = {URL_DEPLOY_ADD}, method = {POST})
    @ResponseBody
    public JsonResponseVO accountLogin(MultipartFile deployFile) {
        //获取部署文件的名字
        String fileName = deployFile.getOriginalFilename();
        //把文件的后缀去掉
        fileName = fileName.substring(0, fileName.lastIndexOf("."));
        Deployment deployment;

        //获取部署接口实现
        try {
            deployment = repositoryService.createDeployment()//创建部署
                    .name(fileName)//需要部署的流程名称，将会记录在流程部署表的 NAME_ 字段上
                    .addZipInputStream(new ZipInputStream(deployFile.getInputStream()))//添加Zip输入流
                    .deploy();
        } catch (IOException e) {
            e.printStackTrace();
            return new JsonResponseVO(false, "部署失败");
        }
        LOGGER.info("部署id={}", deployment.getId());//获取部署id
        LOGGER.info("部署名称={}", deployment.getName());//获取部署名称
        return new JsonResponseVO();
    }

分割线--------------------------------------------------------------------------------------

        EasyUI的form表单，它的代码就比较简单了，后台一样，前台代码如下：

        

<!--上传对话框HTML-->
<div id="dialog">
    <!--上传要使用method="post" enctype="multipart/form-data"-->
    <form id="upload" method="post" enctype="multipart/form-data">
        <input type="file" name="deployFile" class="easyui-validatebox" data-options="required:true">
    </form>
</div>

如果本文对你有帮助，不妨请我喝瓶可乐吧！

你的打赏是对我最好的支持！