Web端PostObject直傳實踐簡介
開發場景：
每個OSS用戶都會用到上傳服務。Web端常見的上傳方法是用戶在瀏覽器或APP端上傳文件到應用服務器，應用服務器再把文件上傳到OSS。這種方式需通過應用服務器中轉，傳輸效率明顯低於數據直轉至OSS的方式。
本文主要爲：在客戶端通過JavaScript代碼完成簽名，然後通過表單直傳數據到OSS。詳情請參見JavaScript客戶端簽名直傳。
關於詳細的說明文檔請至 阿里雲官方文檔
詳細代碼在文本超鏈接 GitHub中
準備工作：
1、項目搭建（本文使用的vue3.0腳手架）
2、查看官方文檔 下載瀏覽器客戶端代碼，根據文檔教程進行測試預覽
官方教程示例圖：
個人開發歷程：
部門以往的項目中，上傳OSS均通過應用服務器上傳然後再上傳到OSS，根據經理要求，通過web端根據服務器返回的簽名等信息實現直接上傳。
過程1、down官方html代碼，更換籤名等配置信息實現圖片的上傳測試。（成功）
過程2、本着前人種樹後人乘涼，直接網絡搜索關於 vue web直傳oss的類似文章。發現大同小異，均是先進行安裝 ali-oss、ali-oss-web 依賴包或者是直接script標籤引入阿里的sdk 。但是經過對比，發現每個方法最終的oss示例對象都不一致，並且經過測試，出現了各種報錯；
過程3、自己動手豐衣足食，直接擼官方代碼，簡單暴力，無腦操作。
- 1、直接修改初始化vue腳手架項目的 helloword 組件爲vueToOss 並更換代碼爲官方代碼的body內容。下面附代碼；
- 2、講script引入的js進行彙總統一放在跟目錄utils下，在vueToOss中引入utils 下的js。特別注意一點，引入js後控制檯會各種報錯，提示很多方法 is not define,此時去修改utils下對應的js的輸出方式，“export default xxxx”
![]()
- 3、核心js plupload的引入，由於是基於plupload的封裝，示例代碼中直接引入的是min.js代碼，直接引入無效，故直接查找了下 npm的依賴包，點擊超鏈接查看安裝方式。如上圖所示引入該文件即可；
![]()
- 4、改造上傳方法的upload.js,處理控制檯報錯，並且修改下圖所示時間爲有效期
![]()
核心代碼：