前言：

做小程序有一段時(shí)間了，總結(jié)一下做過(guò)的技術(shù)點(diǎn)，特此貢獻(xiàn)給小伙伴們！項(xiàng)目中，有圖片存儲(chǔ)、視頻存儲(chǔ)、錄音存儲(chǔ)這三個(gè)需要云對(duì)接存儲(chǔ)。

一、圖片/視頻/錄音上傳七牛對(duì)接

準(zhǔn)備工作：

a、你要有一個(gè)七牛賬號(hào)，實(shí)名認(rèn)證后，在七牛的個(gè)人中心，有個(gè)秘鑰管理-里面有一對(duì)秘鑰，是上傳必須的。這對(duì)秘鑰，配置在后端，配置時(shí)可以設(shè)置允許上傳格式，也可以設(shè)置為任何格式都可上傳，讓我們的后端大哥去慢慢弄吧。另外，還需要在七牛的對(duì)象存儲(chǔ)里新建一個(gè)存儲(chǔ)空間，所要上傳的文件就是存儲(chǔ)在你創(chuàng)建的空間里，如果你為了方便管理，也可以圖片/視頻/錄音/其他各創(chuàng)建一個(gè)存儲(chǔ)空間。這個(gè)存儲(chǔ)空間名字，也要配置在后端的。

b、需要一個(gè)上傳令牌token，一個(gè)文件上傳對(duì)應(yīng)一個(gè)token，這是必須的。上傳令牌token還有時(shí)效性，后端配置1h，足以讓你完成上傳操作就行。這個(gè)token由我們自己后端生成，前端調(diào)接口獲取token，或者像我這樣，直接把接口丟在[uptokenURL]后面，七牛的會(huì)自己去取。也可以由我們自己先得到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，在下面給的七牛地址里面，可以去下載。里面有個(gè)小程序的SDK，解壓找到里面的qiniuUploader.js，在你需要上傳的頁(yè)面，導(dǎo)入這個(gè)js。https://developer.qiniu.com/sdk#community-sdk

1、圖片上傳七牛

通過(guò)小程序的方法，為用戶提供添加本地圖片，或者拍照，之后你會(huì)得到方法返回的圖片臨時(shí)路徑。我們可以把圖片維護(hù)在一個(gè)數(shù)組里，這樣在上傳七牛時(shí)，以隊(duì)列的形式上傳。

constqiniuUploader = require("../../libs/qiniuUploader.js");

var sourceType = [['camera'], ['album'], ['camera','album']];

var sizeType = [['compressed'], ['original'], ['compressed','original']];

var imageArray = [];// 點(diǎn)擊事件，從本地相冊(cè)選擇圖片或使用相機(jī)拍照。

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],//這個(gè)count可以用來(lái)刪除當(dāng)前圖片

　　success: function (res) {

　　// 返回照片的本地文件路徑，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片vartempFilePaths = res.tempFilePaths;

　　imageArray.push(tempFilePaths);

　　that.setData({

　　imageList: tempFilePaths

　　})

　　that.pictureUploadqiniuMethod(imageArray,"tupian_");

　　},

})

},

//得到圖片路徑數(shù)組后，準(zhǔn)備上傳七牛

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) => {

　　//上傳成功，上傳成功一張圖片，進(jìn)入一次這個(gè)方法，也就是返回一次

　　 console.log(res)

},

(error) => {

　 //圖片上傳失敗，可以在七牛的js里面自己加了一個(gè)err錯(cuò)誤的返回值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',

});

}

},

紅線框內(nèi)的這塊代碼，是七牛qiniuUploader.js文件里的，我加了一個(gè)if判斷，為了防止雖然上傳成功，但沒(méi)有返回data，這樣在代碼112行獲取返回data時(shí)，不至于直接報(bào)錯(cuò)。

 解釋:：

imageArray：準(zhǔn)備上傳的圖片臨時(shí)地址數(shù)組。

fileHead：自定義上傳七牛文件名的頭，為了區(qū)別上傳文件，比如圖片/視頻/錄音/其他，

imgName：自定義上傳七牛文件名，前端處理嘛，我就簡(jiǎn)單的通過(guò)截取臨時(shí)路徑（filePath ）的30-50位字符作為儲(chǔ)存到七牛的文件名，即使你添加了兩張相同的圖片，小程序給你的臨時(shí)路徑也是不一樣的，所以不會(huì)存在重名情況。

domain：下載資源時(shí)用到。如果設(shè)置，在上傳后的success里返回的res.ImageURL字段,是一個(gè)帶http的直接可以訪問(wèn)的文件地址，否則需要自己拼接。

key：最終儲(chǔ)存到七牛的文件名，我這里的圖片文件名=文件頭(fileHead)+偽文件名(imgName)

uploadURL：上傳到七牛的那個(gè)存儲(chǔ)區(qū)域，上傳區(qū)域和上傳區(qū)域代碼一定要對(duì)應(yīng)上。

region：上傳區(qū)域代碼。

shouldUseQiniuFileName:表示是否由七牛來(lái)定義上傳文件名，如果是 true，則文件 key 由 qiniu 服務(wù)器分配 (全局去重)。默認(rèn)是 false，也就是我們自己來(lái)定義。如果key設(shè)置了，優(yōu)先級(jí)最高。

七牛存儲(chǔ)區(qū)域表:

這樣，在需要上傳頁(yè)面調(diào)用七牛的qiniuUploader.js，就可以上傳了。

 會(huì)遇到的問(wèn)題： 

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

①上傳文件不是后端所允許的大小，圖片一般小于3M。視頻/錄音我限制是小于1M 

②上傳文件格式在后端沒(méi)有被允許。

③token獲取失敗，比如我遇到的，七牛的qiniuUploader.js文件通過(guò)接口獲取token，默認(rèn)是這樣[var token = res.data.token;]，而我們后端接口返回的token是這樣

所以我需要在七牛的js文件里修改為[var token = res.data.extra;],要么讓后端改。

2、視頻上傳七牛

視頻上傳和圖片上傳是一個(gè)套路，只是文件格式不同，視頻一般就一個(gè)文件，不像圖片有多張，需要搞個(gè)隊(duì)列來(lái)上傳。所以上傳視頻就這樣：

//事件綁定，添加視頻

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

　　});

　 　　//用戶尋選擇好圖片后，調(diào)用上傳方法
　　
　　　　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里面自己加了一個(gè)err錯(cuò)誤的返回值

　　　　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',//華東區(qū)域代碼});

　　}

},

3、錄音文件上傳七牛

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

 正常上傳時(shí)，能正常返回data，并且狀態(tài)碼是200

后端配置silk格式允許，這樣應(yīng)該是沒(méi)問(wèn)題的。

上傳成功七牛卻沒(méi)有返回data，這個(gè)data里有文件傳七牛那邊在線地址，不返回我們?cè)趺丛L問(wèn)了?，F(xiàn)在的處理是：把音頻文件傳到自己服務(wù)器。目前就只能這么辦了。

這里是小程序?qū)悠吲Ｔ拼鎯?chǔ)的官方文檔：

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論