文件上传
https://dfeidao.gitee.io/widgets/
Installation
yarn add --dev @dfeidao/fd-wh000018Tag
<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
无参数
重置上传控件
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);
});