ExtJS-文件上传组件-FileUpload

ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html
转载请注明出处:https://www.cnblogs.com/cqpanda/p/17653469.html

更新记录
2023年8月24日 从代码迁移到博客。

ExtJS目前已经躺平了。只有自己写了。有需要的兄弟自己下载。

完整源代码：
https://gitee.com/panda666plus/ext-js-file-upload-component

FileUpload.js

/**
 * 文件上传管理View
 */
Ext.define('Panda.view.core.fileUpload.FileUpload',{
    extend: 'Ext.window.Window',
    xtype: 'fileupload',
    alias: 'widget.fileupload',
    requires: [
        'Panda.view.core.fileUpload.FileUploadController',
        'Panda.view.core.fileUpload.FileUploadModel'
    ],

    controller: 'core-fileUpload-FileUploadController',
    viewModel: {
        type: 'core-fileUpload-FileUploadModel'
    },

    //region 自定义参数
    /**
     * 上传组件的调用者
     */
    caller: null,

    /**
     * 上传完成后，需要关联数据的容器、变量
     */
    needFillElement: null,

    /**
     * 允许上传的文件类型
     * 格式参考：'.xlsx||.xls||.pdf'
     */
    allowUploadFileType: '',

    /**
     * 上传框顶部的文本
     */
    customPromptText:'请选择上传文件',

    /**
     * 是否允许自定义文件名称
     */
    allowCustomFileName: false,

    /**
     * 是否允许取消文件上传
     */
    allowCancelFileUpload: true,

    /**
     * 上传成功后的回调函数
     */
    uploadSuccessCallback: null,

    /**
     * 上传出现错误回调函数
     */
    uploadErrorCallback: null,

    /**
     * 上传完成回调函数（不论是否成功）
     */
    uploadFinishCallback: null,
    //endregion

    /**
     * 构造函数
     * @param configs 参数
     */
    constructor:function (configs) {
        //初始化调用者参数
        Ext.apply(this, configs);

        //调用父类构造函数
        this.callParent(configs);

        //初始化上传组件
        this.initUploadPanel();
    },

    /***
     * 初始化上传组件
     */
    initUploadPanel:function () {
        //设置窗口的标题
        this.setTitle(this.customPromptText);
    },

    closable: true,
    listeners: {
        beforeclose: 'onCloseButtonClickEventHandler',
    },
    scrollable: true,
    minHeight: 150,
    maxHeight: 300,
    minWidth: 200,
    maxWidth: 500,
    layout: 'fit',
    items: [
        {
            xtype: 'form',
            reference: 'uploadForm',
            padding: '20px',
            items: [
                {
                    xtype: 'container',
                    width: '100%',
                },
                {
                    xtype: 'filefield',
                    reference: 'uploadFile',
                    width: '100%',
                },
                {
                    xtype: 'textfield',
                    fieldLabel: '自定义文件名（选填）',
                    labelWidth: 175,
                    reference: 'userDefineFileName',
                    name: 'userDefineFileName',
                    width: '100%',
                },
            ]
        }
    ],
    buttons: [
        {
            text: '开始上传',
            handler: 'onSubmitUploadButtonClickEventHandler',
        },
        {
            text: '取消上传',
            handler: 'onCancelSubmitButtonClickEventHandler',
        },
    ],
});

FileUploadController.js

/**
 * 文件上传管理Controller
 */
Ext.define('Panda.view.core.fileUpload.FileUploadController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.core-fileUpload-FileUploadController',

    //文件上传使用的Ajax请求引用
    //用于取消请求
    fileUploadAjaxRequest: null,

    /**
     * 提交上传按钮事件处理函数
     */
    onSubmitUploadButtonClickEventHandler: function () {

        //先让调用上传组件的View进行mask
        this.callerViewMasked();
        //让Window进行遮罩
        this.getView().mask("文件上传中...");

        //控制器作用域
        let controllerScope = this;
        //获得应用引用
        let app = Ext.getApplication();
        //上传路径URL
        let uploadUrl = app.coreApi.getApiUrl('fileUploadPath');
        //获得文件名（用户设置的）(值)
        let userDefineFileName = this.lookupReference('userDefineFileName').getValue();
        //文件上传组件
        let uploadFileComponent = this.lookupReference('uploadFile');
        //文件上传表单DOM组件
        let fileUploadDomElement = uploadFileComponent.fileInputEl.dom;

        //region 验证是否表单是否为空
        //验证文件表单是否有值
        if(uploadFileComponent.getValue() === "")
        {
            //提示用户
            Ext.Msg.alert("温馨提示", "您未选择任何文件，请选择文件后再上传。");
            //取消遮罩（父元素）
            this.callerViewUnmasked();
            //取消遮罩
            this.getView().unmask();
            return;
        }
        //endregion

        //region 验证是否允许的文件类型
        //获得用户选择的文件的后缀
        let filePath = uploadFileComponent.getValue();
        let userSelectFileType = filePath.substring(filePath.lastIndexOf('.'));
        //允许的文件类型
        let allowFileTypes = this.getView().allowUploadFileType.split("||");
        //遍历是否有文件服务，有任何一个符合就返回
        let isAllowFileType = Ext.Array.some(allowFileTypes, function (item) {
            return item.trim() == userSelectFileType.toLowerCase();
        });

        //不符合就进行返回
        if(!isAllowFileType)
        {
            Ext.Msg.alert("温馨提示", "目前暂不支持您选择的文件类型或您选择的文件类型有误，请选择以下类型的文件：" + allowFileTypes.join('、') + '。');
            //取消遮罩（父元素）
            this.callerViewUnmasked();
            //取消遮罩
            this.getView().unmask();
            return;
        }

        //endregion

        //region 发送数据到后端
        //创建表单数据
        let formData =new FormData();
        //表单数据加入上传的文件
        formData.append('uploadFile',fileUploadDomElement.files[0]);
        //表单数据加入上传的自定义文件名称
        formData.append('fileSaveName',userDefineFileName);

        //发起Ajax请求
        this.fileUploadAjaxRequest = Ext.Ajax.request({
            url: uploadUrl,
            cors: true,
            useDefaultXhrHeader: false,
            method: 'post',
            rawData: formData,    //原始数据
            headers: {
                /*
                    最重要的部分，将Content-Type设置成null，
                    ExtJs则会由内部的XMLHTTPRequest自动生成包含boundary的Content-Type，
                    否则在使用rawData的情况下，
                    ExtJs会将Content-Type设置成text/plain
                */
                "Content-Type":null
            },
            success:function (response,options) {
                //取消调用程序的遮罩
                controllerScope.callerViewUnmasked();
                //取消Window遮罩
                controllerScope.getView().unmask();

                //获得后端的数据
                let responseData = Ext.decode(response.responseText);

                //如果上传成功
                if(responseData.success)
                {
                    //消息提示
                    Ext.Msg.alert('温馨提示', responseData.message,function () {
                        //需要填充数据的容器
                        let needFillElement = controllerScope.getView().needFillElement;
                        //为需要上传完成后，返回数据的容器填充数据
                        //如果是图片组件
                        if(needFillElement.setSrc)
                        {
                            needFillElement.setSrc(app.coreApi.filePathInServer);
                        }
                        else if(needFillElement.setValue) //如果是普通表单组件
                        {
                            needFillElement.setValue(responseData.data.filePathInServer);
                        }
                        else if(Ext.typeOf(needFillElement) == 'string') //如果是字符串
                        {
                            needFillElement = responseData.data.filePathInServer;
                        }
                        //关闭window
                        controllerScope.getView().close();
                    });
                }
                else //上传不成功
                {
                    Ext.Msg.alert('温馨提示', responseData.message,function () {
                        //关闭window
                        controllerScope.getView().close();
                    });
                }
            },
            failure:function (response,options) {
                //取消调用程序的遮罩
                controllerScope.callerViewUnmasked();
                //取消Window遮罩
                controllerScope.getView().unmask();

                //获得后端的数据
                let responseData = Ext.decode(response.responseText);

                //上传不成功
                if(!responseData.success)
                {
                    Ext.Msg.alert('温馨提示', '文件上传错误。错误信息：' + responseData.message);
                    return;
                }

                //消息提示
                Ext.Msg.alert('温馨提示', '文件上传错误。');
            }
        });

        //endregion
    },

    /**
     * 取消上传按钮事件处理函数
     */
    onCancelSubmitButtonClickEventHandler: function () {
        //取消mask
        this.callerViewUnmasked();
        //取消Window遮罩
        this.getView().unmask();

        //取消Ajax请求
        Ext.Ajax.abort(this.fileUploadAjaxRequest);

        //关闭Window
        this.getView().close();
    },

    /**
     * 用户点击关闭按钮事件处理函数
     */
    onCloseButtonClickEventHandler: function( panel, eOpts ) {
        //取消mask
        this.callerViewUnmasked();

        //取消Ajax请求
        Ext.Ajax.abort(this.fileUploadAjaxRequest);
    },

    /**
     * 对调用者的视图进行mask
     */
    callerViewMasked: function (){
        //调用者的View进行mask
        //注意caller定义在View中
        //注意caller传入的是Controller类型
        this.getView().caller.getView().mask();
    },

    /**
     * 对调用者的视图进行取消mask
     */
    callerViewUnmasked: function (){
        //注意caller定义在View中
        //注意caller传入的是Controller类型
        this.getView().caller.getView().unmask();
    },
});

FileUploadModel.js

/**
 * 文件上传管理ViewModel
 */
Ext.define('Panda.view.core.fileUpload.FileUploadModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.core-fileUpload-FileUploadModel',
});