使用jsJdk非同步上傳圖片至OSS伺服器
阿新 • • 發佈：2018-11-21
阿里雲官方文件中給的基本都是同步上傳檔案的DEMO，可能是非同步的比較簡單，但是由於自己JS基礎還不夠牢固，在學習使用的時候也很鬧心，因為老是看著看著就看到非同步的那邊去了。將自己寫好的的一個DEMO放於部落格中，萬一能夠幫助到任何一個和我一樣的朋友也是好的。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上傳圖片至OSS伺服器DEMO(分片上傳)</title> </head> <body> <input type="file" id="pic"> <button onclick="upload()">上傳</button> </body> <script src="jquery-3.2.1.min.js"></script> <script src="http://gosspublic.alicdn.com/aliyun-oss-sdk-4.3.0.min.js"></script> <script type="text/javascript"> /*OSS伺服器配置*/ var client = new OSS.Wrapper({ region:'oss伺服器建立的地點', //雲賬號AccessKey有所有API訪問許可權，建議遵循阿里雲安全最佳實踐，建立並使用STS方式來進行API訪問 accessKeyId: '訪問控制中建立的accesskeyId', accessKeySecret: '訪問控制中建立的accesskeyId對應的金鑰,只有在剛建立的時候會顯示,需要儲存下來', bucket: 'oss伺服器上建立的bucket的名稱' }); function upload(){ var pic = document.getElementById("pic").files[0];//獲取html5的file物件 /** * 如果想將圖片上傳到某個資料夾的話,將資料夾路徑拼接到picName中 * 如:存到test資料夾下"test/pic.jpg" * @type {string} */ var picName = "test/"+pic.name;//拼接上傳圖片名稱 //上傳圖片至OSS伺服器 client.multipartUpload(picName,pic).then(res=>{ console.log(res); }).catch(err=>{ console.log(err); }) } </script> </html>
阿里雲官方推薦建立client的時候還是要使用stsToken比較安全，目前我還沒有嘗試到這個demo，等我嘗試成功後，再補充進來。
補充：
上傳過程遇到過的問題
1. c.stat is not a function 出現這個問題根據https://help.aliyun.com/document_detail/32069.html?spm=a2c4e.11153987.0.0.2b071193rF9dsN中的bucket設定設定一下就能解決。