小程序對接七牛雲存儲

前言：

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

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

準備工做：

a、你要有一個七牛帳號，實名認證後，在七牛的我的中心，有個祕鑰管理-裏面有一對祕鑰，是上傳必須的。這對祕鑰，配置在後端，配置時能夠設置容許上傳格式，也能夠設置爲任何格式均可上傳，讓咱們的後端大哥去慢慢弄吧。另外，還須要在七牛的對象存儲裏新建一個存儲空間，所要上傳的文件就是存儲在你建立的空間裏，若是你爲了方便管理，也能夠圖片/視頻/錄音/其餘各建立一個存儲空間。這個存儲空間名字，也要配置在後端的。

b、須要一個上傳令牌token，一個文件上傳對應一個token，這是必須的。上傳令牌token還有時效性，後端配置1h，足以讓你完成上傳操做就行。這個token由咱們本身後端生成，前端調接口獲取token，或者像我這樣，直接把接口丟在[uptokenURL]後面，七牛的會本身去取。也能夠由咱們本身先獲得token，再丟給七牛。

 

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

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

 

c、七牛的js文件qiniuUploader.js，在下面給的七牛地址裏面，能夠去下載。裏面有個小程序的SDK，解壓找到裏面的qiniuUploader.js，在你須要上傳的頁面，導入這個js。

1 https://developer.qiniu.com/sdk#community-sdk

 

一、圖片上傳七牛

經過小程序的方法，爲用戶提供添加本地圖片，或者拍照，以後你會獲得方法返回的圖片臨時路徑。咱們能夠把圖片維護在一個數組裏，這樣在上傳七牛時，以隊列的形式上傳。

 

 1 constqiniuUploader = require("../../libs/qiniuUploader.js");
 2 
 3 var sourceType = [['camera'], ['album'], ['camera','album']]; 4 5 var sizeType = [['compressed'], ['original'], ['compressed','original']]; 6 7 var imageArray = [];// 點擊事件，從本地相冊選擇圖片或使用相機拍照。 8 9 chooseImage: function (e) { 10 11 var that =this; 12 13 wx.chooseImage({ 14 15 　　sourceType: sourceType[this.data.sourceTypeIndex], 16 17 　　sizeType: sizeType[this.data.sizeTypeIndex], 18 19 　　count:this.data.count[this.data.countIndex],//這個count能夠用來刪除當前圖片 20 21 　　success: function (res) { 22 23 　　// 返回照片的本地文件路徑，tempFilePath能夠做爲img標籤的src屬性顯示圖片vartempFilePaths = res.tempFilePaths; 24 25 　　imageArray.push(tempFilePaths); 26 27 　　that.setData({ 28 29 　　imageList: tempFilePaths 30 31 　　}) 32 33 　　that.pictureUploadqiniuMethod(imageArray,"tupian_"); 34 35 　　}, 36 37 }) 38 39 }, 40 41 //獲得圖片路徑數組後，準備上傳七牛 42 43 pictureUploadqiniuMethod: function (imageArray, fileHead){ 44 45 var that =this; 46 47 for(vari =0; i < imageArray.length; i++) { 48 49　　 var filePath = imageArray[i]; 50 51 　　var imgName = filePath.substr(30,50); 52 53 　　qiniuUploader.upload(filePath, (res) => { 54 55 　　//上傳成功，上傳成功一張圖片，進入一次這個方法，也就是返回一次 56 57　　　 console.log(res) 58 59 }, 60 61 (error) => { 62 63　　 //圖片上傳失敗，能夠在七牛的js裏面本身加了一個err錯誤的返回值console.log('error: '+ error) 64 65 }, 66 67 { 68 69 　　domain:'oqxfq54dn.bkt.clouddn.com', 70 71　　 uptokenURL:'https://get.qiniutoken.com/minibx/geo_f/gain_qn_token', 72 73 　　uploadURL:'https://up.qbox.me',//華東key: fileHead + imgName,// 自定義文件 keyregion:'ECN', 74 75 }); 76 77 } 78 79 },

   

紅線框內的這塊代碼，是七牛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;],要麼讓後端改。

 

 

二、視頻上傳七牛

視頻上傳和圖片上傳是一個套路，只是文件格式不一樣，視頻通常就一個文件，不像圖片有多張，須要搞個隊列來上傳。因此上傳視頻就這樣：

 1 //事件綁定，添加視頻
 2 
 3 chooseVideo: function (res) {
 4 
 5 　　var that =this; 6 7 　　wx.chooseVideo({ 8 9 　　　　sourceType: sourceType[this.data.sourceTypeIndex], 10 11 　　　　camera: camera[this.data.cameraIndex], 12 13 　　　　maxDuration: duration[this.data.durationIndex], 14 15 　　　　success: function (res) { 16 17 　　　　var shipinFile= res.tempFilePath; 18 19 　　　　that.setData({ 20 21 　　　　src: shipinFile 22 23 　　}); 24 25　　 　　//用戶尋選擇好圖片後，調用上傳方法 26 　　 27 　　　　that.shipinUploadqiniuMethod(shipinFile,"shipin_"); 28 29 　　　　} 30 31 　　}) 32 33 }, 34 35 //視頻上傳七牛 36 37 shipinUploadqiniuMethod: function (shipinFile, fileHead){ 38 39 　　　　var that =this; 40 41 　　　　var shipinName = shipinFile.substr(30,50); 42 　　 43 　　　　qiniuUploader.upload(shipinFile, (res) => { 44 45 　　　　//視頻上傳成功console.log(res) 46 47 　　}, 48 49 　　(error) => { 50 51 　　　　//視頻上傳失敗，能夠在七牛的js裏面本身加了一個err錯誤的返回值 52 53 　　　　console.log('error: '+ error) 54 55 　　}, 56 57 　　{ 58 59 　　　　domain:'oqxfq54dn.bkt.clouddn.com', 60 　　 61 　　　　uptokenURL:'https://get.qiniutoken.com/minibx/geo_f/gain_qn_token', 62 　　 63 　　　　uploadURL:'https://up.qbox.me',//華東 64 65 　　　　key: fileHead + shipinName ,// 自定義文件 keyregion:'ECN',//華東區域代碼}); 66 67 　　} 68 69 },

 

三、錄音文件上傳七牛

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

 

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

 

 

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

上傳成功七牛卻沒有返回data，這個data裏有文件傳七牛那邊在線地址，不返回咱們怎麼訪問了。如今的處理是：把音頻文件傳到本身服務器。目前就只能這麼辦了。

 

 

2017年12月24更新：

許多人會踩的坑：

 在上傳文件過程當中須要的token，七牛sdk默認是這麼取token

有些後端大哥是這麼返回的

 

 

若是取token沒取到，上傳會報bad token的錯誤

因此後端的都是大哥，管不了他們怎麼返回了，遇到錯誤bad token時，斷點測試一下這裏，上傳問題多半就解決了。

 

這裏是小程序對接七牛雲存儲的官方文檔：

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

 

 有問題的小夥伴，歡迎留言溝通。羣：192713488