bimbox-file-uploader

bimbox-file-uploader

[TOC]

1.组件描述

bimbox-file-uploader组件主要是基于文件上传为功能的业务组件，提供统一文件上传操作，包括添加、移除上传项、重新上传、终止上传、上传进度等。

2.前置条件

本组件依赖 windows 上挂载的 EventBus 对象进行通讯，EventBus 对象是北京电力及标准化平台已挂载好的对象,其他项目使用前请检查。

3.安装组件

npm install --save @aecworks/bimbox-file-uploader --registry=http://101.40.70.165:9010/

4.参数及方法

| 参数 | 类型 | 说明 | 默认 | | :----------------------------------------------------------- | ----------------------- | ------------ | ---- | | _uploadStore | IUploadDataModel | 上传存储 | / | | uploadBaseUrl | string | 上传url | / | | md5 | string | 密码散列函数 | / | | getUserInfo | () => BaseUserInfoModel | 获取用户信息 | / | | uploadCallbacks(beforeUpload,onSuccess,onError,onCancel,onProgress) | IUIEvents | 上传回调 | / | | config | IUploadConfig | 配置 | / | | serviceName | string | 服务名 | / |

5.使用方法

项目中引入bimbox-file-uploader中的UploadFileController类，基于此创建上传相关参数及回调等

import { UploadFileController } from '@aecworks/bimbox-file-uploader';
export class UploadUIController {
    protected _uploadStore: UploadModelForStore;
    protected _uploadDataController: UploadFileController;

    constructor(store: UploadModelForStore) {
        ...
        this._uploadDataController = new UploadFileController({
            store,
            uploadBaseUrl: BimboxRuntimeUtil.instance.serviceOrigin,
            uploadCallbacks: {
                beforeUpload: this._beforeUpload,
                onSuccess: this._onSuccess,
                onError: this._onError,
                onCancel: this._onCancel,
            },
            getUserInfo: () => JSON.parse(StorageUtil.getItem('userInfo')),
            config: {
                isSecurityData: Repository.security.isSecurityData,
                isSecurityMethod: Repository.security.isSecurityMethod,
            }
        });
    }
}

项目基于此导出UploadUIController，应用于store/modules/upload-model/upload-mutation.ts中添加、中止、移除、重新上传文件等修改状态的函数。

6.打包方式

打包

"build": "tsc"

切换为私库

npm config set registry http://101.40.70.165:9010/

发布

npm publish:npmjs

7.参考用例

标准化产品：

​ UploadComponent

​ StoreComponent

8.报错处理

Error: Can't resolve 'child_process' 'fs'

1. tsconfig.json types 添加 node

2. vue.config configureWebpack resolve 添加 fallback: { fs: false, child_process: false },