idsp-web-seed2-uploader

idsp-web-seed2-uploader

分页组件

安装方法

1. 下载程序包

npm i idsp-web-seed2-uploader --save

2. 配置文件依赖

找到 index.html 文件的systemjs配置,加入 idsp-web-seed2-uploader 配置

SystemJS.config({
    transpiler: 'ts',
    typescriptOptions: {
        // ...
    },
    packages: {
        //...
       
        // 组件设置 
        webuploader: {main: 'dist/webuploader.js', format: 'global'},
        'idsp-web-seed2-uploader': {main: 'src/lib/uploader.ts'},
    
        "src": {
            //...
        }
    },
    meta: {
        '*.less': {loader: 'less'},
        '*.css': {loader: 'css'},
        // ...
    },
    
    map: {
        // ...
        'idsp-web-seed2-uploader': 'node_modules/idsp-web-seed2-uploader',
    }
});

3. 在项目src/common/directives/directives.ts中依赖组件

//...
import uploader from "idsp-web-seed2-uploader";

export const mod = module('directives', [...others, uploader]);

4. 接下来就可以使用上传组件了

<uploader
 files="Ctrl.files"
 option="Ctrl.uploadOption"
 [file-queued='Ctrl.fn($file)']
 [file-dequeued='Ctrl.fn($file)']
 [upload-start='Ctrl.fn($file)']
 [upload-before-send='Ctrl.fn($chuck, $data, $headers)']
 [upload-progress='Ctrl.fn($file, $percentage)']
 [upload-error='Ctrl.fn($file, $error)']
 [upload-success='Ctrl.fn($file, $response)']
 [error='Ctrl.fn($type)']
 >
</uploader>

@Route({
  ...
  controllerAs : 'Ctrl'
})
@Controller
exports class PageCtrl{
  public files:UploadFile[];
  public uploaderOption:UploaderOption = {
    dnd : '#dnd-wrapper',
    auto:true,
    server : 'uploader.shtml'
  };
  
  // 上传事件处理
  fn(...){
     ...
  }
}

指令属性参数

UploadFile 属性

• file.name ：表示文件名称(String)
• file.size ：表示文件大小(Number)
• file.sizeUnit ：计算好的文件大小(String)如：12MB
• file.percentage ：上传进度(Number)，从0到100
• file.response ：服务器返回数据，默认为null，当状态为success时可使用
• file.state ：文件状态(String),'ready'|'uploading'| 'success'

UploaderOption 参数