前言：
做小程序有一段時間了踏拜，總結(jié)一下做過的技術(shù)點碎赢，特此貢獻給小伙伴們！項目中执隧，有圖片存儲、視頻存儲、錄音存儲這三個需要云對接存儲镀琉。
一峦嗤、圖片/視頻/錄音上傳七牛對接
準備工作：
a、你要有一個七牛賬號屋摔，實名認證后烁设，在七牛的個人中心，有個秘鑰管理-里面有一對秘鑰钓试，是上傳必須的装黑。這對秘鑰，配置在后端弓熏，配置時可以設(shè)置允許上傳格式恋谭，也可以設(shè)置為任何格式都可上傳，讓我們的后端大哥去慢慢弄吧挽鞠。另外疚颊，還需要在七牛的對象存儲里新建一個存儲空間，所要上傳的文件就是存儲在你創(chuàng)建的空間里信认，如果你為了方便管理材义，也可以圖片/視頻/錄音/其他各創(chuàng)建一個存儲空間。這個存儲空間名字嫁赏，也要配置在后端的其掂。
b、需要一個上傳令牌token潦蝇，一個文件上傳對應(yīng)一個token款熬，這是必須的。上傳令牌token還有時效性护蝶，后端配置1h华烟，足以讓你完成上傳操作就行。這個token由我們自己后端生成持灰，前端調(diào)接口獲取token盔夜，或者像我這樣，直接把接口丟在[uptokenURL]后面堤魁，七牛的會自己去取喂链。也可以由我們自己先得到token，再丟給七牛妥泉。
uptokenURL:'https://get.qiniutoken.com/minibx/geo_f/gain_qn_token',
uploadURL:'https://up.qbox.me',//華東
uptoken: token,
uploadURL:'https://up.qbox.me',//華東
c椭微、七牛的js文件qiniuUploader.js，在下面給的七牛地址里面盲链，可以去下載蝇率。里面有個小程序的SDK迟杂，解壓找到里面的qiniuUploader.js，在你需要上傳的頁面本慕，導(dǎo)入這個js排拷。
https://developer.qiniu.com/sdk#community-sdk
1、圖片上傳七牛
https://developer.qiniu.com/sdk#community-sdk通過小程序的方法锅尘，為用戶提供添加本地圖片监氢，或者拍照，之后你會得到方法返回的圖片臨時路徑藤违。我們可以把圖片維護在一個數(shù)組里浪腐，這樣在上傳七牛時，以隊列的形式上傳顿乒。
```
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_");
},
})
},
//得到圖片路徑數(shù)組后傍睹，準備上傳七牛
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',
});
}
},
```
紅線框內(nèi)的這塊代碼腊脱，是七牛qiniuUploader.js文件里的访得，我加了一個if判斷，為了防止雖然上傳成功陕凹，但沒有返回data悍抑，這樣在代碼112行獲取返回data時，不至于直接報錯杜耙。
解釋：
imageArray：準備上傳的圖片臨時地址數(shù)組搜骡。
fileHead：自定義上傳七牛文件名的頭，為了區(qū)別上傳文件佑女，比如圖片/視頻/錄音/其他记靡，
imgName：自定義上傳七牛文件名，前端處理嘛团驱，我就簡單的通過截取臨時路徑（filePath ）的30-50位字符作為儲存到七牛的文件名摸吠，即使你添加了兩張相同的圖片，小程序給你的臨時路徑也是不一樣的嚎花，所以不會存在重名情況寸痢。
domain：下載資源時用到。如果設(shè)置紊选，在上傳后的success里返回的res.ImageURL字段,是一個帶http的直接可以訪問的文件地址啼止，否則需要自己拼接道逗。
key：最終儲存到七牛的文件名，我這里的圖片文件名=文件頭(fileHead)+偽文件名(imgName)
uploadURL：上傳到七牛的那個存儲區(qū)域献烦，上傳區(qū)域和上傳區(qū)域代碼一定要對應(yīng)上憔辫。
region：上傳區(qū)域代碼。
shouldUseQiniuFileName:表示是否由七牛來定義上傳文件名仿荆，如果是 true，則文件 key 由 qiniu 服務(wù)器分配 (全局去重)坏平。默認是 false拢操，也就是我們自己來定義。如果key設(shè)置了舶替，優(yōu)先級最高令境。
七牛的一張存儲區(qū)域表
就這樣，在你需要上傳頁面調(diào)用七牛的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
});
//用戶尋選擇好圖片后，調(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里面自己加了一個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',//華東區(qū)域代碼});
}
},
```
3坯屿、錄音文件上傳七牛
小程序的錄音格式為silk，錄音上傳七牛巍扛，可以和視頻共用一個方法领跛。但雖然上傳成功了，狀態(tài)碼為403撤奸，七牛沒有返回data吠昭，像這樣：
正常上傳時喊括，能正常返回data，并且狀態(tài)碼是200
后端配置silk格式允許矢棚，這樣應(yīng)該是沒問題的郑什。
上傳成功七牛卻沒有返回data，這個data里有文件傳七牛那邊在線地址蒲肋，不返回我們怎么訪問了∧⒄現(xiàn)在的處理是：把音頻文件傳到自己服務(wù)器。目前就只能這么辦了兜粘。
第一次在簡書發(fā)文章申窘，有問題的小伙伴，歡迎留言溝通孔轴，很期待做小程序的共同交流剃法。
