控件使用文档

飞道科技

七牛云上传

控件必须在mqtt链接完成之后初始化

<fd-w000016></fd-w000016>

Attributes

spaceid

项目spaceid,必须传入

在项目中必须存在js自定义服务:get-upload-token;只需修改AKSKbucket

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;只需修改AKSKbucket

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;只需修改AKSKbucket

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>