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纯前端实现浏览器语音播报、朗读功能的完整代码

《JS纯前端实现浏览器语音播报、朗读功能的完整代码》在现代互联网的发展中,语音技术正逐渐成为改变用户体验的重要一环,下面:本文主要介绍JS纯前端实现浏览器语音播报、朗读功能的相关资料,文中通过代码... 目录一、朗读单条文本:① 语音自选参数,按钮控制语音:② 效果图:二、朗读多条文本:① 语音有默认值:②

在Node.js中使用.env文件管理环境变量的全过程

《在Node.js中使用.env文件管理环境变量的全过程》Node.js应用程序通常依赖于环境变量来管理敏感信息或配置设置,.env文件已经成为一种流行的本地管理这些变量的方法,本文将探讨.env文件... 目录引言为什么使php用 .env 文件 ?如何在 Node.js 中使用 .env 文件最佳实践引

使用Node.js和PostgreSQL构建数据库应用

《使用Node.js和PostgreSQL构建数据库应用》PostgreSQL是一个功能强大的开源关系型数据库,而Node.js是构建高效网络应用的理想平台,结合这两个技术,我们可以创建出色的数据驱动... 目录初始化项目与安装依赖建立数据库连接执行CRUD操作查询数据插入数据更新数据删除数据完整示例与最佳

Python使用FastAPI实现大文件分片上传与断点续传功能

《Python使用FastAPI实现大文件分片上传与断点续传功能》大文件直传常遇到超时、网络抖动失败、失败后只能重传的问题,分片上传+断点续传可以把大文件拆成若干小块逐个上传,并在中断后从已完成分片继... 目录一、接口设计二、服务端实现(FastAPI)2.1 运行环境2.2 目录结构建议2.3 serv

Python一次性将指定版本所有包上传PyPI镜像解决方案

《Python一次性将指定版本所有包上传PyPI镜像解决方案》本文主要介绍了一个安全、完整、可离线部署的解决方案,用于一次性准备指定Python版本的所有包,然后导出到内网环境,感兴趣的小伙伴可以跟随... 目录为什么需要这个方案完整解决方案1. 项目目录结构2. 创建智能下载脚本3. 创建包清单生成脚本4

SpringBoot+RustFS 实现文件切片极速上传的实例代码

《SpringBoot+RustFS实现文件切片极速上传的实例代码》本文介绍利用SpringBoot和RustFS构建高性能文件切片上传系统,实现大文件秒传、断点续传和分片上传等功能,具有一定的参考... 目录一、为什么选择 RustFS + SpringBoot?二、环境准备与部署2.1 安装 RustF

SpringBoot实现不同接口指定上传文件大小的具体步骤

《SpringBoot实现不同接口指定上传文件大小的具体步骤》:本文主要介绍在SpringBoot中通过自定义注解、AOP拦截和配置文件实现不同接口上传文件大小限制的方法,强调需设置全局阈值远大于... 目录一  springboot实现不同接口指定文件大小1.1 思路说明1.2 工程启动说明二 具体实施2

Three.js构建一个 3D 商品展示空间完整实战项目

《Three.js构建一个3D商品展示空间完整实战项目》Three.js是一个强大的JavaScript库,专用于在Web浏览器中创建3D图形,:本文主要介绍Three.js构建一个3D商品展... 目录引言项目核心技术1. 项目架构与资源组织2. 多模型切换、交互热点绑定3. 移动端适配与帧率优化4. 可

GSON框架下将百度天气JSON数据转JavaBean

《GSON框架下将百度天气JSON数据转JavaBean》这篇文章主要为大家详细介绍了如何在GSON框架下实现将百度天气JSON数据转JavaBean,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言一、百度天气jsON1、请求参数2、返回参数3、属性映射二、GSON属性映射实战1、类对象映

使用shardingsphere实现mysql数据库分片方式

《使用shardingsphere实现mysql数据库分片方式》本文介绍如何使用ShardingSphere-JDBC在SpringBoot中实现MySQL水平分库,涵盖分片策略、路由算法及零侵入配置... 目录一、ShardingSphere 简介1.1 对比1.2 核心概念1.3 Sharding-Sp