# @dfeidao/fd-wh000018

> 文件上传

Latest version **4.6.201908091659** (published 2019-08-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @dfeidao/fd-wh000018
pnpm add @dfeidao/fd-wh000018
yarn add @dfeidao/fd-wh000018
bun add @dfeidao/fd-wh000018
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.6.201908091659 |
| Published | 2019-08-09 |
| First published | 2019-07-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 61 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | taoqf |
| Maintainers | taoqf |
| Keywords | feidao, 01feidao, dfeidao, atom, 飞道, 控件, ai |

## Links

- npm: https://www.npmjs.com/package/@dfeidao/fd-wh000018
- Repository: https://gitee.com/dfeidao/widgets
- npm.io page: https://npm.io/package/@dfeidao/fd-wh000018

## Dependencies (3)

- [uppy](https://npm.io/package/uppy.md) 1.3.0
- [compressorjs](https://npm.io/package/compressorjs.md) 1.0.5
- [@dfeidao/core](https://npm.io/package/@dfeidao/core.md) 4.6.201904301027

## Alternatives

- [@expo/fingerprint](https://npm.io/package/@expo/fingerprint.md) — 6.2M weekly downloads
- [@azure/monitor-opentelemetry-exporter](https://npm.io/package/@azure/monitor-opentelemetry-exporter.md) — 850.0K weekly downloads
- [@azure/monitor-opentelemetry](https://npm.io/package/@azure/monitor-opentelemetry.md) — 624.0K weekly downloads
- [@posthog/ai](https://npm.io/package/@posthog/ai.md) — 423.3K weekly downloads
- [fakefilter](https://npm.io/package/fakefilter.md) — 63.9K weekly downloads

## Recent versions

- 4.6.201908091659 (latest) — 2019-08-09
- 4.6.201910230555 (test) — 2019-10-23
- 4.6.201910221352 — 2019-10-22
- 4.6.201908021012 — 2019-08-02
- 4.6.201908020952 — 2019-08-02
- 4.6.201907311050 — 2019-07-31
- 4.6.201907301731 — 2019-07-30
- 4.6.201907301729 — 2019-07-30

## README

# 文件上传

<https://dfeidao.gitee.io/widgets/>

<!-- TOC -->

- [Installation](#installation)
- [Tag](#tag)
- [Attributes](#attributes)
	- [`productid`](#productid)
	- [`spaceid`](#spaceid)
	- [`modelid`](#modelid)
	- [`systemid`](#systemid)
	- [`reupload`](#reupload)
	- [`file_name`](#file_name)
	- [`office2img`](#office2img)
	- [`office2pdf`](#office2pdf)
	- [`img2png`](#img2png)
	- [`allowed_file_types`](#allowed_file_types)
	- [`max_file_size`](#max_file_size)
	- [`max_number_of_files`](#max_number_of_files)
	- [`min_number_of_files`](#min_number_of_files)
	- [`auto_proceed`](#auto_proceed)
	- [`lang`](#lang)
	- [`timeout`](#timeout)
	- [图片压缩参数](#图片压缩参数)
		- [指定最大宽高](#指定最大宽高)
			- [`compress-max-width`](#compress-max-width)
			- [`compress-max-height`](#compress-max-height)
		- [`compress-quality`](#compress-quality)
		- [`compress-convert-size`](#compress-convert-size)
- [Methods](#methods)
	- [`reset`](#reset)
	- [`open`](#open)
	- [`close`](#close)
- [Events](#events)
	- [feidao-web事件绑定示例](#feidao-web事件绑定示例)
	- [`fdwe-uploder-success`](#fdwe-uploder-success)
	- [`fdwe-uploder-complete`](#fdwe-uploder-complete)
- [Example](#example)
	- [设置上传文件的格式](#设置上传文件的格式)
		- [html](#html)
		- [js](#js)
	- [文件更新](#文件更新)
		- [html](#html-1)
		- [js](#js-1)
	- [office文件转图片](#office文件转图片)
		- [html](#html-2)
		- [js](#js-2)
	- [office文件转pdf](#office文件转pdf)
		- [html](#html-3)
		- [js](#js-3)
	- [图片转png](#图片转png)
		- [html](#html-4)
		- [js](#js-4)
	- [设置上传文件的大小，单位为：B](#设置上传文件的大小单位为b)
		- [html](#html-5)
		- [js](#js-5)
	- [设置最大上传文件数量](#设置最大上传文件数量)
		- [html](#html-6)
		- [js](#js-6)
	- [设置最小上传文件数量](#设置最小上传文件数量)
		- [html](#html-7)
		- [js](#js-7)
	- [自动上传](#自动上传)
		- [html](#html-8)
		- [js](#js-8)
- [完整示例](#完整示例)
	- [html](#html-9)
	- [js](#js-9)

<!-- /TOC -->

## Installation

```sh
yarn add --dev @dfeidao/fd-wh000018
```

## Tag

```html
<fd-wh000018></fd-wh000018>
```

## Attributes

### `productid`

项目productid，如`hr_manage`

### `spaceid`

项目spaceid，默认与`productid`相同

### `modelid`

项目modelid，压缩策略编号

### `systemid`

系统表数据所属systemid，默认11

### `reupload`

文件更新，新文件替换原文件

### `file_name`

有reupload属性时file_name必传，要替换的文件id

### `office2img`

office文件转图片

### `office2pdf`

office文件转pdf

### `img2png`

图片转png格式

### `allowed_file_types`

上传文件的类型，格式：["image/*", ".jpg", ".jpeg", ".png", ".gif"]

### `max_file_size`

上传文件的大小，单位B

### `max_number_of_files`

最大上传文件个数

### `min_number_of_files`

最小上传文件个数

### `auto_proceed`

自动上传

### `lang`

语言,目前可选值有`zh_CN`和`en_US`,其它值均作英文处理.

### `timeout`

设置超时时间(时间不能小于5秒,单位:毫秒).

### 图片压缩参数

#### 指定最大宽高

指定要压缩图片的最大的宽高，单位为像素。

比如原图片共有两张，分别为`400*600`和`500*600`设置了`compress-max-width`为`200`，则第一张图片将会被压缩到`200*300`，另外一张图片将会被压缩到`200*240`。

##### `compress-max-width`

与`compress-max-height`只能设置一个。

##### `compress-max-height`

与`compress-max-width`只能设置一个。

#### `compress-quality`

只对`jpeg`和`webp`图片有效

压缩图片的质量,可选值区间为`[0, 1]`，默认为0.8.

需要特别注意的是，如果该配置设置为`1`，有可能`压缩`后的图片比原图片还要大。

建议在可以接受的清晰度条件下，尽可能地调低该值，这样会使图片更小，更便于传输。

以下为一个2.12M的图片在不同压缩质量下的文件大小

compress-quality|原始尺寸|压缩后的尺寸|压缩比|推荐程度
---|---|---|---|---
0|2.12 MB|114.61 KB|94.72%
0.2|2.12 MB|349.57 KB|83.90%
0.4|2.12 MB|517.10 KB|76.18%
0.6|2.12 MB|694.99 KB|67.99%|推荐
0.8|2.12 MB|1.14 MB|46.41%|推荐
1|2.12 MB|2.12 MB|0%|强烈不推荐
NaN|2.12 MB|2.01 MB|5.02%

从上表我们不难发现，压缩质量设置在`0.6`到`0.8`之间最优,但实际还需要以各项目的具体需求进行设置。标准就是只要清晰度能达到项目使用级别，则该值越小越好

#### `compress-convert-size`

只对png文件有用，如果文件原图为png格式，则超过该设置值大小的png格式图片将会被转换为jpeg格式。

以下为`compress-convert-size`设置为`5000000(5MB)`时三个不同大小的png图片转换后的文件示例

`compress-convert-size`|原始尺寸|压缩后的尺寸|压缩比
---|---|---|---
5MB|1.87 MB (PNG)|1.87 MB (PNG)|0%
5MB|5.66 MB (PNG)|450.24 KB (JPEG)	|92.23%
5MB|9.74 MB (PNG)|883.89 KB (JPEG)|91.14%

## Methods

### `reset`

> 无参数

重置上传控件

```js
 editor.reset();
```

### `open`

> 无参数

打开上传文件对话框

```js
 editor.open();
```

### `close`

> 无参数

关闭上传文件对话框

```js
 editor.close();
```

## Events

### feidao-web事件绑定示例

```html
<fd-wh000018 data-feidao-actions="fdwe-uploder-success:a001" productid="hr_manage" style="width: 200px;height: 200px;">
  test
</fd-wh000018>
```

### `fdwe-uploder-success`

返回值格式

```ts
interface ISuccessedFile {
    data: File;
    extension: string;
    id: string;
    isRemote: boolean;
    meta: { name: string; type: string; }
    name: string;
    preview: string;
    progress: {
        uploadStarted: number;
        uploadComplete: boolean;
        percentage: number;
        bytesUploaded: number;
        bytesTotal: number;
    };
    remote: string;
    size: number;
    source: string;
    type: string;
}
interface IFileDoc {
    _id: string;
    length: number;
    chunkSize: number;
    uploadDate: Date;
    md5: string;
    filename: string;
    contentType: string;
    aliases: string[];
    metadata: {
        originialFileName: string;
        productid: string;
    };
    isDeleted: boolean;
}
interface Result {
    file: ISuccessedFile;
    filedocs: IFileDoc[];
}
```

**注意**只能通过该消息的`filedocs`拿到服务器返回的信息

### `fdwe-uploder-complete`

返回值格式

```ts
interface SuccessedFile {
    data: File;
    extension: string;
    id: string;
    isPaused: boolean;
    isRemote: boolean;
    meta: { name: string; type: string; }
    name: string;
    preview: string;
    progress: {
        uploadStarted: number;
        uploadComplete: boolean;
        percentage: number;
        bytesUploaded: number;
        bytesTotal: number;
    };
    remote: string;
    size: number;
    source: string;
    type: string;
    uploadURL: string;
}
interface Result {
    failed: any[];
    successful: SuccessedFile[];
}
```

## Example

### 设置上传文件的格式

#### html

```html
<fd-wh000018 id='uploader' productid="hr_manage" allowed_file_types='["image/*", ".jpg", ".jpeg", ".png", ".gif"]' style="width: 200px;height: 200px;">
  test
</fd-wh000018>
```

#### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

### 文件更新

#### html

```html
<fd-wh000018 id='uploader' reupload file_name='e5e0793b-f14b-4603-81bc-60c3b26f9156' productid="hr_manage" autoProceed style="width: 200px;height: 200px;">
  test
</fd-wh000018>
```

#### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

### office文件转图片

#### html

```html
<fd-wh000018 id='uploader' office2img productid="hr_manage" autoProceed style="width: 200px;height: 200px;">
  test
</fd-wh000018>
```

#### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

### office文件转pdf

#### html

```html
<fd-wh000018 id='uploader' office2pdf productid="hr_manage" autoProceed style="width: 200px;height: 200px;">
  test
</fd-wh000018>
```

#### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

### 图片转png

#### html

```html
<fd-wh000018 id='uploader' img2png productid="hr_manage" autoProceed style="width: 200px;height: 200px;">
  test
</fd-wh000018>
```

#### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

### 设置上传文件的大小，单位为：B

#### html

```html
<fd-wh000018 id='uploader' productid="hr_manage" max_file_size='500000' style="width: 200px;height: 200px;">
  test
</fd-wh000018>
```

#### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

### 设置最大上传文件数量

#### html

```html
<fd-wh000018 id='uploader' productid="hr_manage" max_number_of_files='5' style="width: 200px;height: 200px;">
  tests
</fd-wh000018>
```

#### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

### 设置最小上传文件数量

#### html

```html
<fd-wh000018 id='uploader' productid="hr_manage" min_number_of_files='2' style="width: 200px;height: 200px;">
  test
</fd-wh000018>
```

#### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

### 自动上传

#### html

```html
<fd-wh000018 id='uploader' productid="hr_manage" autoProceed style="width: 200px;height: 200px;">
  test
</fd-wh000018>
```

#### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

## 完整示例

### html

```html
<fd-wh000018 id='uploader' productid="hr_manage" auto_proceed max_file_size='500000' max_number_of_files='5' min_number_of_files='2' allowed_file_types='["image/*", ".jpg", ".jpeg", ".png", ".gif"]' style="width: 200px;height: 200px;" lang="zh_CN" >
  test
</fd-wh000018>
```

### js

```javaScript
const widget = document.querySelector('#uploader');
widget.addEventListener('fdwe-uploder-success', (res) => {
	console.info(res.filedocs);
});
```

---
_Source: https://npm.io/package/@dfeidao/fd-wh000018 · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._