基於node.js和oss的後端簽名直傳

原文：github.com/sikichan/os…

單個圖片上傳頁面，上傳後顯示圖片預覽

阿里雲OSS服務端簽名後直傳

咱們都知道，採用JS客戶端直接簽名，OSSAccessId和AccessKeySecret暴露在前端頁面，能夠被輕易獲取，存在嚴重安全隱患。 這裏提供了一種使用阿里雲OSS服務器端簽名後直傳，避免這種危險的方法。因爲阿里雲OSS開發文檔只提供了Java，PHP，Python和Go語言的例子，本Demo在此提供一個以Node.js做爲後端的例子，供你們參考。

---

請求邏輯：

1. 客戶端要上傳圖片時，到應用服務器取上傳的policy及簽名(signature)
2. 應用服務器返回上傳policy和signature
3. 客戶端拿到了簽名後，直接上傳到OSS

目前支持

chrome, firefox瀏覽器，其餘瀏覽器還未全面測試，歡迎你們測試後在Issues裏反饋。

使用

配置OSS

1. 進入阿里雲管理控制檯 --> 對象存儲OSS
2. 新建Bucket
3. Bucket屬性 --> 跨域設置：

查看本身的AccessKey

點擊顯示，會彈出短信驗證窗口，驗證後便可顯示出你的AccessKeySecret

後端配置文件

backend/src/config/development/app.js

module.exports = {
  port: 3602,
  oss: {
    OSSAccessKeyId: '【這裏填你阿里雲的Access Key ID】',
    secret: '【這裏填你阿里雲的Access Key Secret】',
    host: 'http://cqq.oss-cn-shenzhen.aliyuncs.com' //改成你本身阿里雲OSS的外網域名
  }
}

複製代碼

如何運行這個Demo？

• 後端：backend目錄

npm install
npm start
複製代碼

• 前端：webfront目錄

npm install
npm run dev
複製代碼

技術棧

• koa
• koa-router
• vue
• vue-router
• axios

歡迎Start，歡迎Pull Requests