記錄前端上傳圖片到本身的對象存儲中（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 裏面的文件列表！

大功告成！！！