4.6.201907291116 • Published 5 years ago
@dfeidao/fd-w000016 v4.6.201907291116
七牛云上传
https://dfeidao.gitee.io/widgets/
控件必须在mqtt链接完成之后初始化
<fd-w000016></fd-w000016>
Installation
yarn add --dev @dfeidao/fd-w000016
Attributes
spaceid
项目spaceid,必须传入
在项目中必须存在js自定义服务:get-upload-token;只需修改AK
,SK
,bucket
;
import { auth, rs, util } from 'qiniu';
import './interfaces';
const AK = 'EuAlexLFzRBCAO0vyxEeJSyAtwISmg9y6MW-6CuY';
const EXPIRES = 72000;
const SK = 'JDX6tv_BpYvFuP9lvRz0pY_1PPn5dxemSNaS-UZv';
const bucket = 'test';
const mac = new auth.digest.Mac(AK, SK);
function atom(msg: {}) {
const put_policy = new rs.PutPolicy({
// deadline, // 上传凭证有效截止时间。Unix时间戳,单位为秒。该截止时间为上传完成后,在七牛空间生成文件的校验时间,而非上传的开始时间,一般建议设置为上传开始时间 + 3600s,用户可根据具体的业务场景对凭证截止时间进行调整。
expires: EXPIRES,
insertOnly: 1, // 限定为新增语意。如果设置为非 0 值,则无论 scope 设置为什么形式,仅能以新增模式上传文件
returnBody: '{"key":"$(key)","name":"$(fname)","size":"$(fsize)","imageInfo":$(imageInfo), "avinfo":$(avinfo), "persistentid":$(persistentId), "exif":$(exif), "imageAve":$(imageAve), "ext":$(ext), "bucket":$(bucket)}',
// persistentOps: 'avthumb/mp4/vcodec/libx264',
// persistentPipeline: 'xmedia',
scope: bucket
});
return put_policy.uploadToken(mac);
}
domain
文件存储空间地址,必须传入
preview-type
缩略图类型,只针对图片和视频;值为:image、video;传入此值,则必须限制长传文件类型是图片或者视频。
图片缩略图,项目中必须存在js自定义服务:persistent-images;只需修改AK
,SK
,bucket
;
import { auth, conf, fop, util } from 'qiniu';
import './interfaces';
const AK = 'EuAlexLFzRBCAO0vyxEeJSyAtwISmg9y6MW-6CuY';
const EXPIRES = 72000;
const SK = 'JDX6tv_BpYvFuP9lvRz0pY_1PPn5dxemSNaS-UZv';
const bucket = 'test';
const mac = new auth.digest.Mac(AK, SK);
const config = new conf.Config();
const operManager = new fop.OperationManager(mac, config);
function atom(msg: {
file_name: string;
}) {
const file_name = msg.file_name;
const preview = file_name + 'preview.webp';
const p = util.urlsafeBase64Encode(`${bucket}:${preview}`);
const fops = [
`imageView2/0/w/320/format/webp|saveas/${p}`
];
const srcKey = file_name;
const saveBucket = bucket;
const pipeline = bucket;
const srcBucket = bucket;
const options = {};
return new Promise<{
persistent_id: string;
preview: string;
}>((resolve, reject) => {
// 持久化数据处理返回的是任务的 persistentId,可以根据这个id查询处理状态
operManager.pfop(srcBucket, srcKey, fops, pipeline, options, (err, respBody, respInfo) => {
if (err) {
reject(err);
return;
}
resolve({
persistent_id: respBody.persistentId,
preview
});
});
});
}
视频缩略图,项目中必须存在js自定义服务:persistent-videos;只需修改AK
,SK
,bucket
;
import { auth, conf, fop, util } from 'qiniu';
import './interfaces';
const AK = 'EuAlexLFzRBCAO0vyxEeJSyAtwISmg9y6MW-6CuY';
const EXPIRES = 72000;
const SK = 'JDX6tv_BpYvFuP9lvRz0pY_1PPn5dxemSNaS-UZv';
const bucket = 'test';
const mac = new auth.digest.Mac(AK, SK);
const config = new conf.Config();
const operManager = new fop.OperationManager(mac, config);
function atom(msg: {
file_name: string;
height: number;
width: number;
}) {
const file_name = msg.file_name;
const preview = file_name + 'preview.mp4';
const cover = file_name + 'preview.jpg';
const p = util.urlsafeBase64Encode(`${bucket}:${preview}`);
const c = util.urlsafeBase64Encode(`${bucket}:${cover}`);
const max = 320;
const m = Math.max(msg.width, msg.height);
const rate = max / m;
const w = (msg.width * rate).toFixed(0);
const h = (msg.height * rate).toFixed(0);
const fops = [
`avthumb/mp4/vcodec/libx264|saveas/${p}`,
`vframe/jpg/offset/1/w/${w}/h/${h}|saveas/${c}`
];
const srcKey = file_name;
const saveBucket = bucket;
const pipeline = bucket;
const srcBucket = bucket;
const options = {};
return new Promise<{
persistent_id: string;
preview: string;
cover: string;
}>((resolve, reject) => {
// 持久化数据处理返回的是任务的 persistentId,可以根据这个id查询处理状态
operManager.pfop(srcBucket, srcKey, fops, pipeline, options, (err, respBody, respInfo) => {
if (err) {
reject(err);
return;
}
resolve({
cover,
persistent_id: respBody.persistentId,
preview
});
});
});
}
file-type
上传文件类型限制;参考地址:https://www.cnblogs.com/TBW-Superhero/p/5945469.html 例如图片:'"image/png","image/jpg"'; 例如视频:'"video/mp4","video/mpeg","video/ogg"';
hide-drag
是否在选择文件或者拖拽文件后隐藏拖拽区域。
Methods
start
开始上传
remove_file
删除文件,传入file_id
remove_all
删除所有文件
stop
停止上传
Events
fdwe-added
添加文件
抛出的参数为:
{
file,
file_id,
name
}
fdwe-process
文件上传进度
抛出的参数为:
// loaded: number,已上传大小,单位为字节。
// total: number,本次上传的总量控制信息,单位为字节,注意这里的 total 跟文件大小并不一致。
// percent: number,当前上传进度,范围:0~100。
{
file_id,
loaded,
percent,
total
}
fdwe-error
文件上传失败
抛出的参数为:
{
err,
file_id,
message'
}
fdwe-uploaded
文件上传成功
抛出的参数为:
{
upload_data:{
avinfo: { // 音视频资源的元信息。
audio: {
bit_rate: string;
channels: 1,
codec_name: string;
codec_type: string;
duration: string;
index: number;
nb_frames: string;
r_frame_rate: string;
sample_fmt: string;
sample_rate: string;
start_time: string;
tags: {
creation_time: string;
}
},
format: {
bit_rate: string;
duration: string;
format_long_name: string;
format_name: string;
nb_streams: number;
size: string;
start_time: string;
tags: {
creation_time: string;
}
},
video: {
bit_rate: string;
codec_name: string;
codec_type: string;
display_aspect_ratio: string;
duration: string;
height: number;
index: number;
nb_frames: string;
pix_fmt: string;
r_frame_rate: string;
sample_aspect_ratio: string;
start_time: string;
tags: {
creation_time: string;
},
width: number;
}
};
imageInfo: { // 获取所上传图片的基本信息。
format: string;
width: number;
height: number;
colorModel: string;
};
key: string; // 获得文件保存在空间中的资源名。
name: string; // 上传的原始文件名。
size: number; // 资源尺寸,单位为字节。
persistentid: string; // 音视频转码持久化的进度查询ID。
ext: string; // 上传资源的后缀名,通过自动检测的mimeType 或者原文件的后缀来获取。
bucket: string; // 获得上传的目标空间名。
}
}
Example
完整示例
// 只传入必须参数
<fd-w000016 spaceid="jxkh" domain="http://ox36trx86.bkt.clouddn.com/" id="uploader"></fd-w000016>
绑定事件
<fd-w000016 spaceid="jxkh" domain="http://ox36trx86.bkt.clouddn.com/" id="uploader" data-feidao-actions="fdwe-uploaded:eu-004,fdwe-error:eu-005,fdwe-process:eu-006,fdwe-added:eu-007"></fd-w000016>
设置长传文件类型
<fd-w000016 spaceid="jxkh" domain="http://ox36trx86.bkt.clouddn.com/" id="uploader" file-type='["image/png"]' data-feidao-actions="fdwe-uploaded:eu-004,fdwe-error:eu-005,fdwe-process:eu-006,fdwe-added:eu-007"></fd-w000016>
上传文件并获取缩略图
<fd-w000016 spaceid="jxkh" domain="http://ox36trx86.bkt.clouddn.com/" id="uploader" file-type='["image/png"]' preview-type="image" data-feidao-actions="fdwe-uploaded:eu-004,fdwe-error:eu-005,fdwe-process:eu-006,fdwe-added:eu-007"></fd-w000016>
设置选择文件或者拖拽文件后拖拽区域隐藏
<fd-w000016 spaceid="jxkh" domain="http://ox36trx86.bkt.clouddn.com/" id="uploader" hide-drag data-feidao-actions="fdwe-uploaded:eu-004,fdwe-error:eu-005,fdwe-process:eu-006,fdwe-added:eu-007"></fd-w000016>
更换浏览按钮
<fd-w000016 spaceid="jxkh" domain="http://ox36trx86.bkt.clouddn.com/" id="uploader" data-feidao-actions="fdwe-uploaded:eu-004,fdwe-error:eu-005,fdwe-process:eu-006,fdwe-added:eu-007">
<div slot='look_btn'>
<span>正在刷新...</span>
</div>
</fd-w000016>
更换拖拽区域
<fd-w000016 spaceid="jxkh" domain="http://ox36trx86.bkt.clouddn.com/" id="uploader" data-feidao-actions="fdwe-uploaded:eu-004,fdwe-error:eu-005,fdwe-process:eu-006,fdwe-added:eu-007">
<div slot='drag_div'></div>
</fd-w000016>
4.6.201907291116
5 years ago
4.6.201907081701
5 years ago
4.6.201907081045
5 years ago
4.6.201905201342
5 years ago
4.6.201905201308
5 years ago