@farris/extend-file-upload

修改记录

| 修改日期 | 修改要点 | | ------------------ | :------------------------------------------- | | 2020 年 1 月 17 日 | 支持预览、下载 | | 2020 年 1 月 9 日 | 支持通过后缀过滤 | | 2020 年 1 月 8 日 | 初版 | | 2020 年 2 月 10 日 | 1.支持拖拽和批量上传 2.优化交互方式 | | 2020 年 2 月 11 日 | 预览组件支持列表、卡片展示方式以及自定义模板 | | 2020 年 2 月 20 日 | 完善文档，修改类型问题 | | 2020 年 3 月 2 日 | 1.统一接口，涉及预览、上传抛出事件的类型 2.附件服务器端配置修改，接口统一3.修改说明| |2020年6月9日|可见的重置方法修改| |2020年6月11日|图标异常问题修复|

FFileUploadModule 附件模块

• 提供 forRoot 方法，可以预置附件服务器端配置和附件服务器端实现方法

| 方法 | 参数 | 含义 | | ------- | :---------------------------------------------------------------------------------------------------------------------- | :------- | | forRoot | 两非必填个参数1. config:FFileUploadServerConfig,附件服务器端配置 2. uploadSer: UploadServerService 的实现类 | 提供扩展 |

UploadConfig 附件配置[接口]

| 方法 | 参数 | 含义 | | --------- | :-------------- | :---------------------------------------------------------------- | | url | string,可选 | 指定上传附件的服务器端路径 | | method | string:POST 或 GET，可选 | 指定传递到服务器端内容的方式 | | id | string,可选 | 附件 ID | | fieldName | string,可选 | 字段，当提交服务器端表单信息时，提交文件信息至此字段，默认是 file | | file | UploadFile,可选 | 附件信息 | | data | 键值对像,可选 | 用于扩展传递服务器端的数据 | | headers | 键值对像,可选 | 用于扩展传递服务器端的头部信息 |

UploadInput 附件操作事件[接口]

• 继承自 UploadConfig
• 构造传递给服务的事件，比如在上传附件 uploadFile 的时候需要单独扩展传递服务器端数据，在删除单个文件 remove 的时候，需要单独扩展传递服务器端的头部信息

| 方法 | 参数 | 含义 | | ---- | :--- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | type | 可选 | 事件名称：1、uploadAll,上传所有 2、uploadFile 上传单个 3、cancel 取消 4、cancelAll 取消所有 5、remove 删除单个文件 6、removeAll 删除所有文件 7、config 配置类型 |

FFileUploadServerConfig 附件服务器端配置[接口]

• 继承自 UploadConfig
• 针对服务器端方法，配置需要传递给服务器端的 data 或者 header

| 属性 | 类型 | 含义 | | ------ | :---------- | :----------------- | | upload | UploadInput | 单独用于处理附件上传时，传递到服务器端的配置 | | remove | UploadInput | 单独用于处理删除单个文件时，传递到服务器端的配置 |

UploadServerService 附件服务类[抽象类]

• 抽象类用于限定附件接口服务，可以用于适配第三方附件接口
• 通过实现这个类，定义在上传和删除时候的服务器端方法，在模块初始化时传入。当附件上传和删除时，走实现类的 upload 和 remove 方法

| 方法 | 参数 | 返回值 | 含义 | | ------ | :------------------------------------------------------------------------------------------------------------ | :-------------- | :----------- | | upload | 两个参数: 1、files:UploadFile[]，附件信息 2、event: UploadInput,事件信息包括配置服务器端扩展信息 | Observable | 单个附件上传 | | remove | 两个参数: 1、files:UploadFile[]，附件信息 2、event: UploadInput,事件信息包括配置服务器端扩展信息 | Observable | 单个附件上传 |

上传组件

• 默认启用文件按钮上传方式 -

   <f-file-upload [options]='上传配置项'
       (fUploadDoneEvent)="fUploadDoneHandler($event)" (fUploadRemovedEvent)="fUploadRemovedHandler($event)">
   </f-file-upload>

属性说明

| 属性 | 值类型 | 含义 | 默认值 | | ------------------ | :------------------ | :-------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------ | | disabled | boolean | 是否禁用状态 | | visible | boolean | 上传组件是否可见可与预览组件组合控制状态 | false | | enableDrop | boolean | 是否启用拖拽进行上传 | false | | dropText | string | 拖拽区域提示文字 | 拖拽文件 | | enableSelect | boolean | 是否启用选择文件按钮 | true | | selectText | string | 选择文件按钮文字 | 选择文件 | | multiple | boolean | 是否启用多选 | 启用后可以一次选择多个文件 | | options | UploaderOptions | 上传配置项：1. allowedContentTypes:允许上传的文件类型; 2.maxUploads:限制附件上传个数; 3.maxFileSize:单个文件最大 KB | 1. 允许上传任何类型; 2.不限制附件上传个数;3.单个文件最大 12MB | | extendServerConfig | any | 每个组可以设置特殊服务参数，来覆盖默认的统一模块级配置 | null |

事件说明

| 事件 | 参数类型 | 含义 | | ------------------- | :---------------------- | :------------------------- | | fUploadDoneEvent | FUploadFileExtend[] | 附件上传完成后，抛出此事件 | | fUploadRemovedEvent | FUploadFileExtend[] | 附件删除完成后，抛出此事件 |

预览组件

• 默认是列表(list)显示方式，内容：文件名，文档类型图标、下载按钮和预览按钮 -

  <f-file-preview [fileInfos]="文件信息" [itemCls]="项上单独的class">
  </f-file-preview>

• 列表(list)是纵向平铺每项数据，卡片(card)是横向平铺每项数据 -
• 支持自定义模板 -

  <f-file-preview [fileInfos]="文件信息" [itemCls]="项上单独的class">
       <ng-template filePreviewListTypeTemplate let-data let-readonly>
         ....
       </ng-template>
  </f-file-preview>

属性说明

| 属性 | 值类型 | 含义 | 默认值 | | --------- | :---------------------- | :--------------------------------------------------------- | :----- | | type | string | 文件布局类型：1. list 列表类型 2.card 卡片类型 | list | | itemCls | string | | 空 | | fileInfos | FUploadFileExtend[] | 附件信息数组 | [] | | readonly | boolean | 只读的状态,控制附件是否可删除 | true |

事件说明

| 事件 | 参数类型 | 含义 | | ----------------- | :-------------------- | :--------------------------------- | | filePreviewEvent | FUploadFileExtend | 点击附件预览按钮时，抛出的附件信息 | | fileDownloadEvent | FUploadFileExtend | 点击附件下载按钮时，抛出的附件信息 | | fileRemoveEvent | FUploadFileExtend | 点击附件删除按钮时，抛出的附件信息 |

filePreviewListTypeTemplate

• 预览组件的模板，提供预览界面自定义
• 两个属性
  1. data：UploadFile 类型，附件信息
  2. readonly：boolean 类型，只读状态

UploaderOptions 附件上传配置[接口]

| 属性 | 值类型 | 含义 | | ------------------- | :------- | :--------------------------------------- | | allowedContentTypes | string[] | 允许上传的文件类型，例 如['.jpg','.pdf'] | | maxUploads | number | 最大上传个数 | | maxFileSize | number | 单个文件最大值 KB 为单位 |

FUploadFileExtend 附件文件信息扩展[接口]

| 属性 | 值类型 | 含义 | | ------------------- | :---------------- | :------------------------------------------------- | | id | string | 附件标识 | | name | string | 文件名 | | size [非必] | number | 文件大小 | | type[非必] | string | 文件类型 | | extend[非必] | any 或 null | 记录上传从服务器端返回的数据或者用于预览扩展的信息 | | extendStatus[非必] | number | 记录上传服务器端返回的状态或者用于预览扩展状态 | | extendHeaders[非必] | 键值对象或者 null | 记录服务器端返回的头信息或者用于预览扩展 Header |

UploadFile 附件信息[接口]

| 属性 | 值类型 | 含义 | | --------------- | :------------ | :----------------------- | | id | string | 附件上传后会自动生成 id | | fileIndex | number | 附件在数组中的位置 | | name | string | 文件名 | | size | number | 文件大小，单位(B) | | type | string | 文件类型 | | form | FormData | 提交服务器的数据 | | response | any 可选 | 记录返回数据 | | responseStatus | number 可选 | 记录从服务器端返回的状态 | | nativeFile | File,可选 | 上传的原始文件信息 | | responseHeaders | 键值对象,可选 | 服务器传递的 Header 信息 |

This library was generated with Angular CLI version 7.2.0.

Code scaffolding

Run ng generate component component-name --project f-file-upload to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module --project f-file-upload.

Note: Don't forget to add --project f-file-upload or else it will be added to the default project in your angular.json file.

Build

Run ng build f-file-upload to build the project. The build artifacts will be stored in the dist/ directory.

Publishing

After building your library with ng build f-file-upload, go to the dist folder cd dist/f-file-upload and run npm publish.

Running unit tests

Run ng test f-file-upload to execute the unit tests via Karma.

Further help

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.