技术标签: obs webbrowser vue JS js
可多个文件同时上传,需要显示文件名、上传进度、上传速度,可以暂停、继续
1、搭建OBS服务环境相关请参考官网教程 点击跳转
2、下载OBS BrowserJS SDK开发包 点击跳转,引入esdk-obs-browserjs-without-polyfill-3.19.5.min.js
文件
import ObsClient from "../util/esdk-obs-browserjs-without-polyfill-3.19.5.min.js";
3、创建OBS实例
<script>
import ObsClient from "../util/esdk-obs-browserjs-without-polyfill-3.19.5.min.js";
var obsClient; // obs实例
export default {
...
mounted() {
// 创建ObsClient实例
obsClient = new ObsClient({
access_key_id: '*** Provide your Access Key ***',
secret_access_key: '*** Provide your Secret Key ***',
server : 'https://your-endpoint'
});
}
</script>
4、断点续传上传
直接采用官方示例,复制过来后,修改好桶名、分片等信息后,直接可以上传成功,但暂停等功能并不好用,我们需要对其进行修改
首先上代码,代码中有详细注释,底部还有部分代码的说明
/**
* 上传函数
* @param {file} file 文件
* @param {Object} fileObj 本条上传文件相关的信息
*/
setObs(file,fileObj) {
let _this = this
fileObj.cp = {
}
fileObj.hook = ""
obsClient.uploadFile(
{
Bucket: xxx,
Key: xxx,
SourceFile: file,
PartSize: xxx,
TaskNum: 3,
// 获取上传进度的回调函数
ProgressCallback: function (transferredAmount,totalAmount) {
_this.progressCallback.call(_this,fileObj, transferredAmount, totalAmount)
},
// 获取上传事件的回调函数
EventCallback: function (eventType, eventParam, eventResult) {
// 处理事件响应
},
// 获取断点续传控制参数的回调函数
ResumeCallback: function (resumeHook, uploadCheckpoint) {
// 获取取消断点续传上传任务控制参数
fileObj.hook = resumeHook;
// 存储断点续传记录对象
fileObj.cp = uploadCheckpoint;
},
},
// 成功、失败回调函数
function (err, result) {
if (err) {
_this.errType.call(_this,file,fileObj) // 报错后执行(包括用户手动暂停)
} else {
if (result.CommonMsg.Status < 300 && result.InterfaceResult) {
_this.successSetFile() // 成功后执行
} else {
_this.statusSet(fileObj, 'error') // 将文件上传状态改为失败
}
}
}
);
},
/**
* 上传中回调函数
* @param {Object} fileObj 本条上传文件相关的信息
* @param {Number} transferredAmount 已上传的字节数
* @param {Number} totalAmount 总字节数
*/
progressCallback(fileObj, transferredAmount, totalAmount) {
if (fileObj.amount && transferredAmount) {
let speed = ((transferredAmount - fileObj.amount) / 1048576) >= 1 ? ((transferredAmount - fileObj.amount) / 1048576).toFixed(2) + 'MB' : ((transferredAmount - fileObj.amount) / 1024).toFixed(2) + 'KB'
fileObj.speed = speed // 上传速度
}
fileObj.amount = transferredAmount // 已上传的字节数(用于计算上传速度)
this.statusSet(fileObj, Math.floor((transferredAmount * 100.0) / totalAmount)); // // 将文件上传状态改为进度条
},
/**
* err报错(手动暂停、取消)后执行
* @param {file} file 文件
* @param {Object} fileObj 本条上传文件相关的信息
*/
errType(file, fileObj) {
let _this = this
if (fileObj.cancelManually) {
// 用于判断是手动暂停的
fileObj.errSetFileArguments = [file,fileObj]
} else {
// 如果不是手动暂停的则自动重新执行
fileObj.errNumber ? fileObj.errNumber += 1 : fileObj.errNumber = 1
if (fileObj.errNumber > 50) return this.statusSet(fileObj, 'error') // 重新执行次数过多后将状态改为失败
_this.errSetFile(file,fileObj) // 自动重新执行
}
},
/**
* 报错(手动暂停、取消)后重新执行
* @param {Object} file 文件(fileList中errSetFileArguments)
* @param {Object} fileObj fileList中对应参数(fileList中errSetFileArguments)
*/
errSetFile(file,fileObj) {
let _this = this
// 删除手动运行判断
fileObj.errSetFile = false
obsClient.uploadFile(
{
UploadCheckpoint: fileObj.cp,
// 获取上传进度的回调函数
ProgressCallback: function (transferredAmount,totalAmount) {
_this.progressCallback.call(_this,fileObj, transferredAmount, totalAmount)
},
EventCallback: function (eventType, eventParam, eventResult) {
// 处理事件响应
},
ResumeCallback: function (resumeHook, uploadCheckpoint) {
// 获取取消断点续传上传任务控制参数
fileObj.hook = resumeHook;
// 存储断点续传记录对象
fileObj.cp = uploadCheckpoint;
},
},
function (err, result) {
if (err) {
_this.errType.call(_this,file,fileObj)
} else {
if (result.CommonMsg.Status < 300) {
let key = result.InterfaceResult.Key
_this.successSetFile() // 成功后执行
} else {
_thisthis.statusSet(fileObj, 'error') // // 将文件上传状态改为失败
}
}
}
);
},
/**
* 成功后执行
*/
successSetFile() {
...}
/**
* 暂停上传
* @param {Object} item fileList-item
*/
pauseUpload(item, type) {
item.cancelManually = true // 用于判断是手动暂停的
item.hook.cancel()
this.statusSet(item, 'pause') // 将文件上传状态改为暂停
},
/**
* 继续上传
* @param {Object} item fileList-item
*/
continueUpload(fileObj) {
this.errSetFile(...fileObj.errSetFileArguments)
}
ProgressCallback
参数回调函数中,有三个形参,分别为已上传的字节数、总字节数、已使用的时间(秒),通过该函数可以算出进度条和上传速度
// fileObj.amount 为上一次保存的已上传的字节数
/**
* 上传函数
* @param {Number} transferredAmount 已上传的字节数
* @param {Number} totalAmount 总字节数
*/
ProgressCallback: function (transferredAmount,totalAmount) {
if (fileObj.amount && transferredAmount) {
let speed = ((transferredAmount - fileObj.amount) / 1048576) >= 1 ? ((transferredAmount - fileObj.amount) / 1048576).toFixed(2) + 'MB' : ((transferredAmount - fileObj.amount) / 1024).toFixed(2) + 'KB'
fileObj.speed = speed // 上传速度
}
fileObj.amount = transferredAmount // 已上传的字节数(用于计算上传速度)
Math.floor((transferredAmount * 100.0) / totalAmount); // 进度条
}
在ResumeCallback
参数回调函数中,可以获取断点续传控制参数的回调函数和断点续传记录对象,我们需要将两个参数存起来。断点续传控制参数用于调用暂停和继续;断点续传记录对象用于在暂停后继续执行
obsClient.uploadFile
的第二个参数是处理上传结束后是否的回调函数,在用户暂停的时候也会走这个回调函数
我在做暂停功能时的思路是:在执行上传后,通过ResumeCallback
得到断点续传控制参数和断点续传记录对象(#1)。在用户点击暂停时候,通过调用断点续传控制参数.cancel()
暂停上传,同时存储一个字段用于判断是手动暂停的(#2);然后在回调函数中通过这个字段判断如果是手动暂停的,保存相关信息(#3),在用户点击继续时再次调用断点续传接口,继续上传任务(#4)。
#1
// fileObj 本条上传文件相关的信息
// 获取断点续传控制参数的回调函数
ResumeCallback: function (resumeHook, uploadCheckpoint) {
// 获取取消断点续传上传任务控制参数
fileObj.hook = resumeHook;
// 存储断点续传记录对象
fileObj.cp = uploadCheckpoint;
},
#2
/**
* 暂停上传
* @param {Object} item fileList-item
*/
pauseUpload(item, type) {
item.cancelManually = true // 用于判断是手动暂停的
item.hook.cancel()
this.statusSet(item, 'pause') // 将文件上传状态改为暂停
},
#3
// 成功、失败回调函数
obsClient.uploadFile(
{
...},
function (err, result) {
if (err) {
if (fileObj.cancelManually) {
// true: 手动暂停的
fileObj.errSetFileArguments = [file,fileObj] // 用户点击继续时执行所需要的参数[文件,本条上传文件相关的信息]
} else {
...
}
}
}
#4
/**
* 继续上传
*/
this.errSetFile(...fileObj.errSetFileArguments)
文章浏览阅读360次。依赖 dependency除了包含,groupId,artifactId,version等基本元素外,还会包含一些其他的元素。[html] view plain copy dependency> groupId>groupId> artifactId>artifactId> version>ve_complile test runtime provided
文章浏览阅读1.8k次。head>meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>title>表单提交后按钮禁用title>script type="text/javascript">function sub() {document.forms[0].elements[0].disabled =true;//docume_按钮点击之后禁用成功提交后再可用
文章浏览阅读3.5k次。input输入手机号增加空格,点击按钮获取手机号时去掉空格。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>input输入手机号增加空格</title><meta name="viewp_html实现手机号空格的css
文章浏览阅读241次。一. 初识SpringCloud1.1 初识微服架构微服务架构:"微服务”一词源于 Martin Fowler的名为 Microservices的博文,可以在他的官方博客上找到http://martinfowler.com/articles/microservices.html微服务是系统架构上的一种设计风格,它的主旨是将一个原本独立的系统拆分成多个小型服务,这些小型服务都在各自独立的进程中运行,服务之间一般通过 HTTP 的 RESTfuLAPI 进行通信协作。被拆分成的每一个小型服
文章浏览阅读1.6k次。我们先来实现主函数部分:#include <windows.h>#include <stdio.h>#include <conio.h>#include <string.h>#include <dos.h>#include <math.h>#include <time.h>#include <stdlib.h>#define CLS system("cls")#define PUS sy
文章浏览阅读3.2k次。1、打开运行,输入“regedit”,打开注册表。2、在注册表中找到如下位置\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run,右键“Run”新建一个字符串类型的键值。3、右键新建的键值,选择“修改”,将数值名称改为 你要启动的程序名称如:XXX.exe,数值数据改为 程序所在位置的路径 如:C:\windows\system32\XXX.exe (直接不能修改名字的,可以先点击重命名,改好名字,再点击修改,修改数值数据_添加的开机启动项列表
文章浏览阅读735次。直接 make 编译时Segmentation fault (core dumped)cmake 时指定 release 模式,即cmake -DCMAKE_BUILD_TYPE=Release ..出现警告,但还是失败。无奈只能换成.pcd 文件。..._ply三角化模型读取失败
文章浏览阅读418次。Description动态加边删边维护图连通性n<=5000,m<=500000允许离线题解wori这种模板都不会写了吗…预处理每条边在什么时候出现什么时候消失根据时间建线段树线段树每个节点开一个vector存在他管理这段时间里一直存在的边把边一开始插入就可以知道这个线段树长什么样了然后开始线段树分治,dfs这棵线段树进去的时候就把边全部插入出来就全部删除..._动态增减的图 连通性 site:csdn.net
文章浏览阅读154次。Flink on Hive 介绍SQL 是大数据领域中的重要应用场景,为了完善 Flink 的生态,发掘 Flink 在批处理方面的潜力,我们决定增强 FlinkSQL 的功能,从而让用户能够通过 Flink 完成更多的任务。Hive 是大数据领域最早出现的 SQL 引擎,发展至今有着丰富的功能和广泛的用户基础。之后出现的 SQL 引擎,如 Spark SQL、Impala 等,都在一定程..._flink1.9 kafka写入hive
文章浏览阅读241次。灰狼算法(GWO)优化长短期记忆神经网络的数据回归预测,GWO-LSTM回归预测,多输入单输出模型_matlab实现gwo-lstm灰狼算法优化长短期记忆网络多输入单输出
文章浏览阅读1.5w次,点赞27次,收藏90次。目录动画@keyframes规则浏览器支持CSS3动画属性CSS3动画什么是CSS3中的动画实例动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。@keyframes规则@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改..._设定一个元素按规定的动画执行,你需要运用什么规则?
文章浏览阅读1k次。『2021最新』Android Studio 个人配置,提高生产率必备篇_android studio settings 2021版本常用配置