记录前端上传图片到本身的对象存储中（Vue环境，以百度BOS为例）

写在前面

最近在捣鼓本身的博客网站后台管理系统，在发布文章的时候须要用到上传图片，因为本身没有作上传图片的接口，因此就借助百度云的对象存储来实现上传到BOS而后返回BOS里面的图片连接供前端使用。如下就是简单的一个使用过程。

其实上传文件到本身的BOS有不少方式，百度云也提供了不少工具供你们使用

上传前准备

在上传以前 必定要去配置你的bucket的访问权限！

开始上传

访问权限设置好以后 就能够开始了 那么在这里给你们介绍的是 使用BOS的JavaScript SDK来进行上传操做

首先是在你的项目里面引入SDK

而后初始化你的BOSClient

• ak 就是你服务器安全中心的AccessKey
• sk 就是对应的SecretKey
• endpoint 就是你BOS对应的地区服务域名

初始化完成后呢 就能够开始使用BOSClient对象来对bucket和object进行操做了！

这里我就以Buffer格式来上传图片举例！

在使用UI组件的Upload组件上传文件后 是能够拿到 上传的 file 文件的

那么就能够将file转为buffer 而后调用BOS的上传方法

代码以下所示：

在文档里面 putObject方法是这样写的

• 第一个参数 bucket就是在你的BOS里面能够找到
• 第二个参数 就是文件名称
• 第三个参数 就是你的buffer对象了

好的 那么咱们来看下效果

先点击上传图片

看到成功了 再去看看 BOS 里面的文件列表！

大功告成！！！