微信小程式對接七牛雲端儲存的方法，小程式對接牛雲

小程式對接七牛雲端儲存的方法，小程式對接牛雲

前言：

做小程式有一段時間了，總結一下做過的技術點，特此貢獻給小夥伴們！項目中，有圖片儲存、視頻儲存、錄音儲存這三個需要雲對接儲存。

一、圖片/視頻/錄音上傳七牛對接

準備工作：

a、你要有一個七牛帳號，實名認證後，在七牛的個人中心，有個秘鑰管理-裡面有一對秘鑰，是上傳必須的。這對秘鑰，配置在後端，配置時可以設定允許上傳格式，也可以設定為任何格式都可上傳，讓我們的後端大哥去慢慢弄吧。另外，還需要在七牛的Object Storage Service裡建立一個儲存空間，所要上傳的檔案就是儲存在你建立的空間裡，如果你為了方便管理，也可以圖片/視頻/錄音/其他各建立一個儲存空間。這個儲存空間名字，也要配置在後端的。

b、需要一個上傳令牌token，一個檔案上傳對應一個token，這是必須的。上傳令牌token還有時效性，後端配置1h，足以讓你完成上傳操作就行。這個token由我們自己後端產生，前端調介面擷取token，或者像我這樣，直接把介面丟在[uptokenURL]後面，七牛的會自己去取。也可以由我們自己先得到token，再丟給七牛。

uptokenURL:'https://get.qiniutoken.com/minibx/geo_f/gain_qn_toke',uploadURL:'https://up.qbox.me',//華東

uptoken: token,uploadURL:'https://up.qbox.me',//華東

c、七牛的js檔案qiniuUploader.js，在下面給的七牛地址裡面，可以去下載。裡面有個小程式的SDK，解壓找到裡面的qiniuUploader.js，在你需要上傳的頁面，匯入這個js。https://developer.qiniu.com/sdk#community-sdk

1、圖片上傳七牛

通過小程式的方法，為使用者提供添加本地圖片，或者拍照，之後你會得到方法返回的圖片臨時路徑。我們可以把圖片維護在一個數組裡，這樣在上傳七牛時，以隊列的形式上傳。

constqiniuUploader = require("../../libs/qiniuUploader.js");var sourceType = [['camera'], ['album'], ['camera','album']];var sizeType = [['compressed'], ['original'], ['compressed','original']];var imageArray = [];// 點擊事件，從本地相簿選擇圖片或使用相機拍照。chooseImage: function (e) {var that =this;wx.chooseImage({　　sourceType: sourceType[this.data.sourceTypeIndex],　　sizeType: sizeType[this.data.sizeTypeIndex],　　count:this.data.count[this.data.countIndex],//這個count可以用來刪除當前圖片　　success: function (res) {　　// 返回照片的本地檔案路徑，tempFilePath可以作為img標籤的src屬性顯示圖片vartempFilePaths = res.tempFilePaths;　　imageArray.push(tempFilePaths);　　that.setData({　　imageList: tempFilePaths　　})　　that.pictureUploadqiniuMethod(imageArray,"tupian_");　　},})},//得到圖片路徑數組後，準備上傳七牛pictureUploadqiniuMethod: function (imageArray, fileHead){var that =this;for(vari =0; i < imageArray.length; i++) {　 var filePath = imageArray[i];　　var imgName = filePath.substr(30,50);　　qiniuUploader.upload(filePath, (res) => {　　//上傳成功，上傳成功一張圖片，進入一次這個方法，也就是返回一次　　 console.log(res)},(error) => {　 //圖片上傳失敗，可以在七牛的js裡面自己加了一個err錯誤的傳回值console.log('error: '+ error)},{　　domain:'oqxfq54dn.bkt.clouddn.com',　 uptokenURL:'https://get.qiniutoken.com/minibx/geo_f/gain_qn_token',　　uploadURL:'https://up.qbox.me',//華東key: fileHead + imgName,// 自訂檔案 keyregion:'ECN',});}},

紅線框內的這塊代碼，是七牛qiniuUploader.js檔案裡的，我加了一個if判斷，為了防止雖然上傳成功，但沒有返回data，這樣在代碼112行擷取返回data時，不至於直接報錯。

 

 解釋:：

imageArray：準備上傳的圖片臨時地址數組。

fileHead：自訂上傳七牛檔案名稱的頭，為了區別上傳檔案，比片/視頻/錄音/其他，

imgName：自訂上傳七牛檔案名稱，前端處理嘛，我就簡單的通過截取臨時路徑（filePath ）的30-50位字元作為儲存到七牛的檔案名稱，即使你添加了兩張相同的圖片，小程式給你的臨時路徑也是不一樣的，所以不會存在重名情況。

domain：下載資源時用到。如果設定，在上傳後的success裡返回的res.ImageURL欄位,是一個帶http的直接可以訪問的檔案地址，否則需要自己拼接。

key：最終儲存到七牛的檔案名稱，我這裡的圖片檔案名稱=檔案頭(fileHead)+偽檔案名稱(imgName)

uploadURL：上傳到七牛的那個儲存地區，上傳地區和上傳地區代碼一定要對應上。

region：上傳地區代碼。

shouldUseQiniuFileName:表示是否由七牛來定義上傳檔案名稱，如果是 true，則檔案 key 由 qiniu 伺服器分配 (全域去重)。預設是 false，也就是我們自己來定義。如果key設定了，優先順序最高。

七牛儲存地區表:

這樣，在需要上傳頁面調用七牛的qiniuUploader.js，就可以上傳了。

 會遇到的問題： 

某張圖片/視頻/錄音上傳失敗可能的原因：

①上傳檔案不是後端所允許的大小，圖片一般小於3M。視頻/錄音我限制是小於1M 

②上傳檔案格式在後端沒有被允許。

③token擷取失敗，比如我遇到的，七牛的qiniuUploader.js檔案通過介面擷取token，預設是這樣[var token = res.data.token;]，而我們後端介面返回的token是這樣

所以我需要在七牛的js檔案裡修改為[var token = res.data.extra;],要麼讓後端改。

2、視頻上傳七牛

視頻上傳和圖片上傳是一個套路，只是檔案格式不同，視頻一般就一個檔案，不像圖片有多張，需要搞個隊列來上傳。所以上傳視頻就這樣：

//事件綁定，添加視頻chooseVideo: function (res) {　　var that =this;　　wx.chooseVideo({　　　　sourceType: sourceType[this.data.sourceTypeIndex],　　　　camera: camera[this.data.cameraIndex],　　　　maxDuration: duration[this.data.durationIndex],　　　　success: function (res) {　　　　var shipinFile= res.tempFilePath;　　　　that.setData({　　　　src: shipinFile　　});　 　　//使用者尋選擇好圖片後，調用上傳方法　　　　　　that.shipinUploadqiniuMethod(shipinFile,"shipin_");　　　　}　　})},//視頻上傳七牛shipinUploadqiniuMethod: function (shipinFile, fileHead){　　　　var that =this;　　　　var shipinName = shipinFile.substr(30,50);　　　　　　qiniuUploader.upload(shipinFile, (res) => {　　　　//視頻上傳成功console.log(res)　　},　　(error) => {　　　　//視頻上傳失敗，可以在七牛的js裡面自己加了一個err錯誤的傳回值　　　　console.log('error: '+ error)　　},　　{　　　　domain:'oqxfq54dn.bkt.clouddn.com',　　　　　　uptokenURL:'https://get.qiniutoken.com/minibx/geo_f/gain_qn_token',　　　　　　uploadURL:'https://up.qbox.me',//華東　　　　key: fileHead + shipinName ,// 自訂檔案 keyregion:'ECN',//華東地區代碼});　　}},

3、錄音檔案上傳七牛

小程式的錄音格式為silk，錄音上傳七牛，可以和視頻共用一個方法。但雖然上傳成功了，狀態代碼為403，七牛沒有返回data，像這樣：

 正常上傳時，能正常返回data，並且狀態代碼是200

後端配置silk格式允許，這樣應該是沒問題的。

上傳成功七牛卻沒有返回data，這個data裡有檔案傳七牛那邊線上地址，不返回我們怎麼訪問了。現在的處理是：把音頻檔案傳到自己伺服器。目前就只能這麼辦了。

這裡是小程式對接七牛雲端儲存的官方文檔：

https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md?ref=developer.qiniu.com

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。