@dfeidao/fd-w000016

v4.6.201907291116

Published

4 years ago

七牛云上传

0High
0Medium
0Low

taoqf

feidao 01feidao dfeidao atom 飞道控件 ai

七牛云上传

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>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

七牛云上传

Installation

Attributes

spaceid

domain

preview-type

file-type

hide-drag

Methods

start

remove_file

remove_all

stop

Events

fdwe-added

fdwe-process

fdwe-error

fdwe-uploaded

Example

完整示例

绑定事件

设置长传文件类型

上传文件并获取缩略图

设置选择文件或者拖拽文件后拖拽区域隐藏

更换浏览按钮

更换拖拽区域

`spaceid`

`domain`

`preview-type`

`file-type`

`hide-drag`

`start`

`remove_file`

`remove_all`

`stop`

`fdwe-added`

`fdwe-process`

`fdwe-error`

`fdwe-uploaded`