4.6.201908091659 • Published 5 years ago

@dfeidao/fd-wh000018 v4.6.201908091659

Weekly downloads
1
License
MIT
Repository
-
Last release
5 years ago

文件上传

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

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_CNen_US,其它值均作英文处理.

timeout

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

图片压缩参数

指定最大宽高

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

比如原图片共有两张,分别为400*600500*600设置了compress-max-width200,则第一张图片将会被压缩到200*300,另外一张图片将会被压缩到200*240

compress-max-width

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

compress-max-height

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

compress-quality

只对jpegwebp图片有效

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

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

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

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

compress-quality原始尺寸压缩后的尺寸压缩比推荐程度
02.12 MB114.61 KB94.72%
0.22.12 MB349.57 KB83.90%
0.42.12 MB517.10 KB76.18%
0.62.12 MB694.99 KB67.99%推荐
0.82.12 MB1.14 MB46.41%推荐
12.12 MB2.12 MB0%强烈不推荐
NaN2.12 MB2.01 MB5.02%

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

compress-convert-size

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

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

compress-convert-size原始尺寸压缩后的尺寸压缩比
5MB1.87 MB (PNG)1.87 MB (PNG)0%
5MB5.66 MB (PNG)450.24 KB (JPEG)92.23%
5MB9.74 MB (PNG)883.89 KB (JPEG)91.14%

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);
});