@dfeidao/fd-wh000018 v4.6.201908091659

文件上传

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

• Installation
• Tag
• Attributes - productid - spaceid - modelid - systemid - reupload - file_name - office2img - office2pdf - img2png - allowed_file_types - max_file_size - max_number_of_files - min_number_of_files - auto_proceed - lang - timeout - 图片压缩参数 - 指定最大宽高 - compress-max-width - compress-max-height - compress-quality - compress-convert-size
• Methods - reset - open - close
• Events - feidao-web事件绑定示例 - fdwe-uploder-success - fdwe-uploder-complete
• Example - 设置上传文件的格式 - html - js - 文件更新 - html - js - office文件转图片 - html - js - office文件转pdf - html - js - 图片转png - html - js - 设置上传文件的大小，单位为：B - html - js - 设置最大上传文件数量 - html - js - 设置最小上传文件数量 - html - js - 自动上传 - html - js
• 完整示例 - html - js

Installation

yarn add --dev @dfeidao/fd-wh000018

Tag

<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的图片在不同压缩质量下的文件大小

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

compress-convert-size

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

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

Methods

reset

无参数

重置上传控件

 editor.reset();

open

无参数

打开上传文件对话框

 editor.open();

close

无参数

关闭上传文件对话框

 editor.close();

Events

feidao-web事件绑定示例

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

fdwe-uploder-success

返回值格式

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

返回值格式

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

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

js

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

文件更新

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

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

office文件转图片

html

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

js

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

office文件转pdf

html

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

js

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

图片转png

html

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

js

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

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

html

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

js

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

设置最大上传文件数量

html

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

js

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

设置最小上传文件数量

html

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

js

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

自动上传

html

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

js

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

完整示例

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

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