前端 vue 直传 华为云OBS(BrowserJS 断点续传方法)_vue使用obs browserjs-程序员宅基地

技术标签: 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)

—END—

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/block_xu/article/details/114003265

智能推荐

maven 依赖_complile test runtime provided-程序员宅基地

文章浏览阅读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_按钮点击之后禁用成功提交后再可用

input输入手机号增加空格_html实现手机号空格的css-程序员宅基地

文章浏览阅读3.5k次。input输入手机号增加空格,点击按钮获取手机号时去掉空格。&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt;&lt;meta charset="UTF-8"&gt;&lt;title&gt;input输入手机号增加空格&lt;/title&gt;&lt;meta name="viewp_html实现手机号空格的css

20-springCloud-day01-程序员宅基地

文章浏览阅读241次。一. 初识SpringCloud1.1 初识微服架构微服务架构:"微服务”一词源于 Martin Fowler的名为 Microservices的博文,可以在他的官方博客上找到http://martinfowler.com/articles/microservices.html微服务是系统架构上的一种设计风格,它的主旨是将一个原本独立的系统拆分成多个小型服务,这些小型服务都在各自独立的进程中运行,服务之间一般通过 HTTP 的 RESTfuLAPI 进行通信协作。被拆分成的每一个小型服

C语言实现斗地主游戏-程序员宅基地

文章浏览阅读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

WIN10 注册表添加启动项_添加的开机启动项列表-程序员宅基地

文章浏览阅读3.2k次。1、打开运行,输入“regedit”,打开注册表。2、在注册表中找到如下位置\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run,右键“Run”新建一个字符串类型的键值。3、右键新建的键值,选择“修改”,将数值名称改为 你要启动的程序名称如:XXX.exe,数值数据改为 程序所在位置的路径 如:C:\windows\system32\XXX.exe (直接不能修改名字的,可以先点击重命名,改好名字,再点击修改,修改数值数据_添加的开机启动项列表

随便推点

pcl 加载 .ply文件失败_ply三角化模型读取失败-程序员宅基地

文章浏览阅读735次。直接 make 编译时Segmentation fault (core dumped)cmake 时指定 release 模式,即cmake -DCMAKE_BUILD_TYPE=Release ..出现警告,但还是失败。无奈只能换成.pcd 文件。..._ply三角化模型读取失败

[loj#121][线段树分治][并查集]动态图连通性_动态增减的图 连通性 site:csdn.net-程序员宅基地

文章浏览阅读418次。Description动态加边删边维护图连通性n&lt;=5000,m&lt;=500000允许离线题解wori这种模板都不会写了吗…预处理每条边在什么时候出现什么时候消失根据时间建线段树线段树每个节点开一个vector存在他管理这段时间里一直存在的边把边一开始插入就可以知道这个线段树长什么样了然后开始线段树分治,dfs这棵线段树进去的时候就把边全部插入出来就全部删除..._动态增减的图 连通性 site:csdn.net

如何在 Flink 1.9 中使用 Hive?_flink1.9 kafka写入hive-程序员宅基地

文章浏览阅读154次。Flink on Hive 介绍SQL 是大数据领域中的重要应用场景,为了完善 Flink 的生态,发掘 Flink 在批处理方面的潜力,我们决定增强 FlinkSQL 的功能,从而让用户能够通过 Flink 完成更多的任务。Hive 是大数据领域最早出现的 SQL 引擎,发展至今有着丰富的功能和广泛的用户基础。之后出现的 SQL 引擎,如 Spark SQL、Impala 等,都在一定程..._flink1.9 kafka写入hive

灰狼算法(GWO)优化长短期记忆神经网络的数据回归预测,GWO-LSTM回归预测,多输入单输出模型_matlab实现gwo-lstm灰狼算法优化长短期记忆网络多输入单输出-程序员宅基地

文章浏览阅读241次。灰狼算法(GWO)优化长短期记忆神经网络的数据回归预测,GWO-LSTM回归预测,多输入单输出模型_matlab实现gwo-lstm灰狼算法优化长短期记忆网络多输入单输出

CSS 使用动画—— @keyframes 规则和 animation 规则_设定一个元素按规定的动画执行,你需要运用什么规则?-程序员宅基地

文章浏览阅读1.5w次,点赞27次,收藏90次。目录动画@keyframes规则浏览器支持CSS3动画属性CSS3动画什么是CSS3中的动画实例动画通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。@keyframes规则@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改..._设定一个元素按规定的动画执行,你需要运用什么规则?

『2021最新』Android Studio 个人配置,提高生产率必备篇_android studio settings 2021版本常用配置-程序员宅基地

文章浏览阅读1k次。『2021最新』Android Studio 个人配置,提高生产率必备篇_android studio settings 2021版本常用配置

推荐文章

热门文章

相关标签