js: 百度云BOS 分片上传

2024-06-15 04:44
文章标签 百度 js 上传 分片 bos

本文主要是介绍js: 百度云BOS 分片上传,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

百度云BOS存储后怎么查看或下载呢?

// 1) 查看登录到百度智能云控制台 – 对象存储BOS”服务–选择一个Bucket,进入后可以查看该Bucket下的所有文件和文件夹。
2)下载OS浏览器端不支持批量下载,可以通过以下方式下载文件(使用BOS桌面客户端/使用API/SDK/使用BOSCMD命令行工具)
// 购买

百度云BOS(对象存储服务)的endpoint、AccessKeyID(ak)和SecretAccessKey(sk)怎么查看?

1) 百度云控制台 -- 对象存储BOS 
endpoint的格式为bos.<region>.baidubce.com 如Bucket列表下的概览 
zwqbostest.gz.bcebos.com
2)控制台右上角,点击您的用户名或头像,展开个人信息面板 选择“安全认证”或“IAM” 选择“访问管理”下的“访问令牌”或“API密钥管理”。 在这里,您可以查看或创建AccessKey对。每个AccessKey对包括一个AccessKeyID和一个SecretAccessKey。endpoint:zwqbostest.gz.bcebos.com
key: ALTAKUhSXX2QFk7xxxLsAdza2o
密钥:1b822e8bba0a4c698exxx75e7aa3c072

开启cors否则会出现报错

在这里插入图片描述

在这里插入图片描述

这里打开后直接点确定就可以了。默认没有开启cors

代码示例(客户端)

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><input type="file" id="myFile"><!-- <script src="https://bce.bdstatic.com/lib/@baiducloud/sdk/1.0.0-rc.40/baidubce-sdk.bundle.min.js"></script> --><script src="./baidubce-sdk.bundle.min.js"></script><!-- async.min.js从github上复制下载  --><script src="./async.min.js"></script><script>// 初始化const config = {endpoint: "https://zwqbostest.gz.bcebos.com", //传入Bucket所在区域域名credentials: {ak: "xxx", //您的AccessKeysk: "xxx", //您的SecretAccessKey},};let bucket = "zwqbostest";let key = "植物大战僵尸杂交版v.1.2.zip";let client = new baidubce.sdk.BosClient(config);// client.putObjectFromString(bucket, key, 'hello world')// .then(response => console.log('response', response))    // 成功// // 成功结果为{body:{},http_headers: {content-length:'0', etag: '5eb63bbbe01eeed093cb22bb8f5acdc3', x-bce-request-id:'0e082aad-eeb8-4760-9f88-18111106c541'}}// .catch(error => console.error(error));      // 失败</script><script>// 1. 对文件进行分块let options = {"Content-Type": "application/json", // 添加http header"Cache-Control": "public, max-age=31536000", // 指定缓存指令"Content-Disposition": 'attachment; filename="example.jpg"', // 指示回复的内容该以何种形式展示"x-bce-meta-foo1": "bar1", // 添加自定义meta信息"x-bce-meta-foo2": "bar2", // 添加自定义meta信息"x-bce-meta-foo3": "bar3", // 添加自定义meta信息};let PART_SIZE = 5 * 1024 * 1024; // 指定分块大小function getTasks(file, uploadId, bucketName, key) {let leftSize = file.size;let offset = 0;let partNumber = 1;let tasks = [];while (leftSize > 0) {let partSize = Math.min(leftSize, PART_SIZE);tasks.push({file: file,uploadId: uploadId,bucketName: bucketName,key: key,partNumber: partNumber,partSize: partSize,start: offset,stop: offset + partSize - 1,});leftSize -= partSize;offset += partSize;partNumber += 1;}return tasks;}// 2. 处理每个分块的上传逻辑function uploadPartFile(state, client) {console.log('处理每个分块的上传逻辑')return function (task, callback) {let blob = task.file.slice(task.start, task.stop + 1);client.uploadPartFromBlob(task.bucketName,task.key,task.uploadId,task.partNumber,task.partSize,blob).then(function (res) {++state.loaded;callback(null, res);}).catch(function (err) {callback(err);});};}// 3. 初始化uploadID,开始上传分块,并完成上传let uploadId;document.getElementById('myFile').addEventListener('change', function(e) {  var file = e.target.files[0];  console.log('file', file)key = file.nameclient.initiateMultipartUpload(bucket, key, options).then(function (response) {uploadId = response.body.uploadId; // 开始上传,获取服务器生成的uploadIdconsole.log("开始上传,获取服务器生成的uploadId", uploadId);let deferred = baidubce.sdk.Q.defer();let tasks = getTasks(file, uploadId, bucket, key);let state = {lengthComputable: true,loaded: 0,total: tasks.length,};// 为了管理分块上传,使用了async(https://github.com/caolan/async)库来进行异步处理console.log('管理分块上传', async)let THREADS = 2; // 同时上传的分块数量async.mapLimit(tasks,THREADS,uploadPartFile(state, client),function (err, results) {if (err) {deferred.reject(err);} else {deferred.resolve(results);}});console.log('deferred.promise', deferred.promise)return deferred.promise;}).then(function (allResponse) {let partList = [];console.log('生成分块清单')allResponse.forEach(function (response, index) {// 生成分块清单partList.push({partNumber: index + 1,eTag: response.http_headers.etag,});});console.log('完成上传')return client.completeMultipartUpload(bucket,key,uploadId,partList); // 完成上传}).then(function (res) {// 上传完成console.log("上传完成");}).catch(function (err) {// 上传失败,添加您的代码console.error("上传失败", err);});})</script></body>
</html>

结果
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这篇关于js: 百度云BOS 分片上传的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1062454

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

百度/小米/滴滴/京东,中台架构比较

小米中台建设实践 01 小米的三大中台建设:业务+数据+技术 业务中台--从业务说起 在中台建设中,需要规范化的服务接口、一致整合化的数据、容器化的技术组件以及弹性的基础设施。并结合业务情况,判定是否真的需要中台。 小米参考了业界优秀的案例包括移动中台、数据中台、业务中台、技术中台等,再结合其业务发展历程及业务现状,整理了中台架构的核心方法论,一是企业如何共享服务,二是如何为业务提供便利。

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

js react 笔记 2

起因, 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'

学习记录:js算法(二十八):删除排序链表中的重复元素、删除排序链表中的重复元素II

文章目录 删除排序链表中的重复元素我的思路解法一:循环解法二:递归 网上思路 删除排序链表中的重复元素 II我的思路网上思路 总结 删除排序链表中的重复元素 给定一个已排序的链表的头 head , 删除所有重复的元素,使每个元素只出现一次 。返回 已排序的链表 。 图一 图二 示例 1:(图一)输入:head = [1,1,2]输出:[1,2]示例 2:(图