前言
随着互联网的高速发展，视频已成为人们在信息传播和交流中的必要手段。而视频上传的需求也越来越普遍。为了提升用户的上传体验，优化上传流程，我们可以选择一些上传工具扩展我们的业务。本文将介绍一种基于 aliyun-vod-upload-js 的上传工具。
aliyun-vod-upload-js 是什么？
aliyun-vod-upload-js 是针对阿里云视频点播服务定制的一款 JavaScript 文件上传工具，适用于 web 前端页面直传视频。
为什么选择 aliyun-vod-upload-js？
- 兼容性：支持主流浏览器，保证兼容性。
- 稳定性：基于 HTTPS/HTTP 协议上传稳定可靠，上传速度可达 100M/s。
- 安全性：通过阿里云点播视频作为突破口实现保护视频源安全。
安装
你可以通过 npm 安装 aliyun-vod-upload-js：
npm install aliyun-vod-upload-js
使用
我们将以 React.js 为例，展示 aliyun-vod-upload-js 如何在前端实现视频直传。
在 React 中使用 aliyun-vod-upload-js。
- 在你的 react 项目中，导入 aliyun-vod-upload-js 模块：
import AliyunUpload from 'aliyun-vod-upload-js';
- 为组件添加构造函数。
class VideoUploader extends React.Component {
constructor(props) {
super(props);
}
}- 添加一个用于点击选择视频的按钮：
<input type="file" multiple="" onChange={this.handleFileChange}
ref={fileInput => this.fileInput = fileInput}
style={{ display: 'none' }} />
<button onClick={() => this.handleClick()}>选择视频</button>- 编写 handleFileChange 函数：
-- -------------------- ---- -------
---------------- - --- -- -
----- ----- - ---------------
----- -------- - ---
------- - - -- - - ------------- ---- -
----- ---- - ---------
----- -------- - --- --------------
-------- ---------
--------- --------
------------------ --
----------- --
-------------- --
------- --------------
------------ ------------------
---------------- ----------------------
--------- --------------- -- --
------- -------------
------- ------- ----------------------
----- -----
---------------- -- -- ---------------------
---------------- ------ -- -
--------------------
----------------------
------------------ --- ------------- -
-----------------------
-
--
--------------- ----- -- -------------------
----------------- ---------- -- ----------------------
---
-----------------
-
-- 编写 handleClick 函数：
handleClick = () => {
this.fileInput.click();
}参数介绍
| 参数名 | 是否必选 | 默认值 | 类型 | 含义 |
|---|---|---|---|---|
| timeout | 否 | 600000 | number | 上传超时时间 |
| partSize | 否 | 1048576 | number | 每个文件分片大小 |
| concurrentRequest | 否 | 3 | number | 上传并发数 |
| retryCount | 否 | 3 | number | 操作重试次数 |
| retryDuration | 否 | 0 | number | 操作重试间隔时间 |
| region | 是 | string | 地区 | |
| accessKeyId | 是 | string | 阿里云 API 密钥 ID | |
| accessKeySecret | 是 | string | 阿里云 API 密钥 Secret | |
| stsToken | 否 | string | STS 临时授权 Token | |
| bucket | 是 | string | 上传到哪个 bucket | |
| object | 是 | string | 上传到哪个 object | |
| file | 是 | file | 要上传的文件 | |
| onUploadStarted | 否 | Function | 上传开始回调 | |
| onUploadSucceed | 否 | Function | 上传成功回调 | |
| onUploadFailed | 否 | Function | 上传失败回调 | |
| onUploadProgress | 否 | Function | 上传进度回调 |
总结
aliyun-vod-upload-js 是一款适用于 web 前端页面直传视频的 JavaScript 文件上传工具，具有兼容性、稳定性、安全性的特点。在 React 项目中，通过导入 aliyun-vod-upload-js 模块，结合组件的构造函数和回调函数，实现视频直传的功能。本文详细介绍了 aliyun-vod-upload-js 的使用，具有一定的深度和学习以及指导意义。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5351ab1864dac6694b