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

相关文章

Redis分片集群的实现

《Redis分片集群的实现》Redis分片集群是一种将Redis数据库分散到多个节点上的方式,以提供更高的性能和可伸缩性,本文主要介绍了Redis分片集群的实现,具有一定的参考价值,感兴趣的可以了解一... 目录1. Redis Cluster的核心概念哈希槽(Hash Slots)主从复制与故障转移2.

用js控制视频播放进度基本示例代码

《用js控制视频播放进度基本示例代码》写前端的时候,很多的时候是需要支持要网页视频播放的功能,下面这篇文章主要给大家介绍了关于用js控制视频播放进度的相关资料,文中通过代码介绍的非常详细,需要的朋友可... 目录前言html部分:JavaScript部分:注意:总结前言在javascript中控制视频播放

Java实现数据库图片上传与存储功能

《Java实现数据库图片上传与存储功能》在现代的Web开发中,上传图片并将其存储在数据库中是常见的需求之一,本文将介绍如何通过Java实现图片上传,存储到数据库的完整过程,希望对大家有所帮助... 目录1. 项目结构2. 数据库表设计3. 实现图片上传功能3.1 文件上传控制器3.2 图片上传服务4. 实现

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

前端原生js实现拖拽排课效果实例

《前端原生js实现拖拽排课效果实例》:本文主要介绍如何实现一个简单的课程表拖拽功能,通过HTML、CSS和JavaScript的配合,我们实现了课程项的拖拽、放置和显示功能,文中通过实例代码介绍的... 目录1. 效果展示2. 效果分析2.1 关键点2.2 实现方法3. 代码实现3.1 html部分3.2

JS 实现复制到剪贴板的几种方式小结

《JS实现复制到剪贴板的几种方式小结》本文主要介绍了JS实现复制到剪贴板的几种方式小结,包括ClipboardAPI和document.execCommand这两种方法,具有一定的参考价值,感兴趣的... 目录一、Clipboard API相关属性方法二、document.execCommand优点:缺点: