vue - vue项目使用BOS (百度云对象存储)上传文件
百度云的JavaScript地址:https://cloud.baidu.com/doc/BOS/s/Djwvyrhiw
1,安装SDK
支持 Node 4.x 以及更高版本
npm install @baiducloud/sdk
2,配置信息(一般是由公司提供)
import {BosClient} from '@baiducloud/sdk';const config = {endpoint: <EndPoint>, //传入Bucket所在区域域名credentials: {ak: <AccessKeyID>, //您的AccessKeysk: <SecretAccessKey> //您的SecretAccessKey}
};let bucket = 'my-bucket';
let key = 'hello.js';// 这个要放在mounted里面进行初始化
let client = new BosClient(config);
3,上传方式介绍
这里官方提供了四种文件的上传方式 我使用的是以blob对象形式上传(putObjectFromBlob())
上传Object;Object是BOS中最基本的数据单元,您可以把Object简单的理解为文件。对于一个简单的Object的上传,BOS为您提供了四种方式:文件形式上传、数据流形式上传、二进制串上传和字符串上传。
function done(response) {// 上传完成
}
function fail(fail) {// 上传失败
}// 以字符串形式上传
client.putObjectFromString(bucket, object, 'hello world').then(done).catch(fail);// 以buffer形式上传
var buffer = new Buffer('hello world'); client.putObject(bucket, object, buffer).then(done).catch(fail);// 以文件形式上传,仅支持Node.js环境
client.putObjectFromFile(bucket, object, <path-to-file>).then(done).catch(fail);// 以blob对象形式上传,仅支持浏览器环境
client.putObjectFromBlob(bucket, object, <blob对象>).then(done).catch(fail);
4,开始使用 putObjectFromBlob 进行上传
vue项目选择文件时拿到的有file格式至直接上传或转为blob格式进行上传(都可以);
下面代码是我上传的案例,因为是多个文件上传 所以我这边使用的是for循环进行循环上传;但要进行计数 上传成功的和上传总数是否一样;一样说明全部上传成功;全部成功之后的处理需要你这边自行处理;
putObjectFromBlob():参数说明:
第一个参数是:桶名 (配置信息里面有)
第二个参数是:上传的文件名 (如果想要上传到指定的文件夹 需要在文件名前面加文件夹的路径 如:/XTBbaifang/文件名 ”)
第三个参数是:你要上传的文件的 file格式 或者是blob格式 这两个都可以 (建议使用直接使用file,blob还需要转换一下)
then():是成功的回调: 成功的回调不会返回给你此文件上传成功后的网络地址 这个需要你自己去拼接;
拼接格式是:endpoint(配置信息里面的路径) + 文件名(如果在指定的文件夹需要 添加文件夹的名称)
catch():是上传失败的回调(不过一般不会失败的)
// 案例: 开始进行批量上传boldList是存放blod格式的数组for (let i = 0; i < boldList.length; i++) {// 上传的计数this.uploadCount++;if (boldList[i].bold) {this.client.putObjectFromBlob(bucket, this.fileBaseUrl + boldList[i].filename, boldList[i].bold) // 使用blod的形式上传.then((res) => {console.log('上传成功');// 成功的计数this.uploadSuccessCount++;// 上传成功后的文件的网络路径 需要自己去拼接let fileUrl = `${publicConfig.config.endpoint}${this.fileBaseUrl}${boldList[i].filename}`;// 把成功的添加到本地的数组里面this.totalUploadedList.push({ mainIndex: boldList[i].mainIndex, isUpload: true, fileUrl }); //需要传给后端的 路径数组// 全部上传成功的处理 这个需要根据需求来进行向对应的处理if(this.uploadCount === this.uploadSuccessCount ){console.log('全部上传成功的处理');}}).catch((error) => {this.isShowUploaderMask = false;console.error('上传百度云失败 error:', error);});}}
5,百度云也是使用xhr请求进行上传的 可以在network中看到
vue - vue项目使用BOS (百度云对象存储)上传文件相关推荐
- 阿里云对象存储上传文件
1.登录阿里云官网 阿里云-上云就上阿里云 2.点击产品,找到对象存储OSS,点击进去 3.如果首次使用,下面可能显示立即购买或者折扣套餐,点击进去购买.如果已经购买,则跳到第5步 4.使用默认选项即 ...
- 腾讯云产品系列(一)COS对象存储上传
腾讯云COS对象存储上传 前言 一.COS对象存储是什么? 二.COS对象存储能做什么? 1.图文介绍流程 2.简单介绍 三.COS对象存储怎么使用? 1.准备工作 2.本文引用javaSDK版本示例 ...
- Thinkphp对接百度云对象存储 BOS【实现网页版的百度云盘】
本篇文章给大家带来的内容是关于Thinkphp5对接百度云对象存储 BOS(代码Case),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 首先下载SDK包可以在 官网下载 ,或者在项 ...
- Java springboot项目引入腾讯云COS实现上传
Java springboot项目引入腾讯云COS实现上传 pom.xml 配置类CosConfig.java 上传工具类CosClientUtil.java pom.xml <!--腾讯云上传 ...
- sscom串口网络数据调试器使用post方法向华为云obs桶上传文件和图片
原贴地址:sscom串口网络数据调试器使用post方法向华为云obs桶上传文件和图片-云社区-华为云 [摘要] 之前发了文章"postman使用post方法向华为云obs桶上传文件和图片&q ...
- postman使用put方法向华为云obs桶上传文件和图片
原贴地址:https://bbs.huaweicloud.com/blogs/298147 [摘要] postman使用put方法向华为云obs桶上传文件和图片.记录下过程. postman使用put ...
- 云服务器可以文件服务器,云服务器 可以上传文件
云服务器 可以上传文件 内容精选 换一换 安装传输工具在本地主机和Windows云服务器上分别安装数据传输工具,将文件上传到云服务器.例如QQ.exe.在本地主机和Windows云服务器上分别安装数据 ...
- 微信小程序云开发实现上传文件和预览下载文件
微信小程序云开发实现上传文件和预览下载文件 一.前言 目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的p ...
- linux登录百度网盘下载上传文件
这里写自定义目录标题 linux登录百度网盘下载上传文件 linux登录百度网盘下载上传文件 参考一下的三个地址: 1.https://blog.csdn.net/huojiahui22/articl ...
- 使用百度云对象存储BOSnodejs上传文件
BOS上传文件核心代码 const config = {credentials: {ak: '',sk: ''} };let bucket = ''; let client = new BosClie ...
最新文章
- 软件工程课程学生信息
- 单片机独立式按键c语言程序,(原创)51单片机C语言程序设计--速学教程实例(入门篇)之独立按键(查询)...
- 实现Callable接口通过FutureTask包装器来创建Thread线程
- 利用qsort二级排序
- Spring MVC 安全示例
- jar 包的认识与处理、jar 文件 war 文件以及 ear 文件
- 如何从iPhoto检索丢失的照片?
- 领域搜索算法 是什么 和遗传算法、模拟退火算法、禁忌搜索算法、模糊优化 算法、微粒群算法关系
- TortoiseGit-创建分支、合并分支
- PPT 不支持打开显示 webp 图片
- 单生狗必备之如何用Python给PLMM表白
- 32位服务器系统安装教程,服务器系统数据库安装教程
- 鸢(yuan)尾花分类任务
- Couldnt find preset es2015 relative to directory
- 华为轮值CEO郭平:与伙伴同行,打造智能社会五朵云之一
- 电子取证平台需求设计文档
- 抽丝剥茧——调停者和门面设计模式
- 如何打造139团队(不同层次人员的选择与培养,大型研发团队,大型敏捷开发团队)
- 视频会议工具Zoom上市大涨—办公真的必须面对面吗?
- Ubuntu如何修改一个只读文件