ExtJs上传文件

Posted 2022-07-18 mb62caa7d6f2477

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

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

        废话不多说，上明码。

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

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

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>

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