微信小程序?qū)悠吲T拼鎯Φ姆椒?/h1>
更新時間:2017年07月30日 08:56:12 作者:玩世不恭、
本篇文章主要介紹了小程序?qū)悠吲T拼鎯Φ姆椒?,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
前言:
做小程序有一段時間了,總結(jié)一下做過的技術(shù)點,特此貢獻給小伙伴們!項目中,有圖片存儲、視頻存儲、錄音存儲這三個需要云對接存儲。
一、圖片/視頻/錄音上傳七牛對接
準(zhǔn)備工作:
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_toke',
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、圖片上傳七牛
通過小程序的方法,為用戶提供添加本地圖片,或者拍照,之后你會得到方法返回的圖片臨時路徑。我們可以把圖片維護在一個數(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可以用來刪除當(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) => {
//上傳成功,上傳成功一張圖片,進入一次這個方法,也就是返回一次
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:準(zhǔn)備上傳的圖片臨時地址數(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ù)器。目前就只能這么辦了。
這里是小程序?qū)悠吲T拼鎯Φ墓俜轿臋n:
https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md?ref=developer.qiniu.com
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
-
JavaScript判斷數(shù)組是否包含指定元素的方法
這篇文章主要介紹了JavaScript判斷數(shù)組是否包含指定元素的方法,涉及javascript中contains方法的使用技巧,需要的朋友可以參考下 2015-07-07
-
js獲取html的span標(biāo)簽的值方法(超簡單)
下面小編就為大家?guī)硪黄猨s獲取html的span標(biāo)簽的值方法(超簡單)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧 2016-07-07
-
jquery的$getjson調(diào)用并獲取遠程的JSON字符串問題
jQuery中常用getJSON來調(diào)用并獲取遠程的JSON字符串,將其轉(zhuǎn)換為JSON對象,如果成功,則執(zhí)行回調(diào)函數(shù),本文將詳細介紹,需要的朋友可以參考下 2012-12-12
-
D3.js 從P元素的創(chuàng)建開始(顯示可加載數(shù)據(jù))
D3是一個基于數(shù)據(jù)操作的可視化js庫,認識d3,就從最基礎(chǔ)的顯示可加載數(shù)據(jù)談起,需要的朋友可以參考下 2014-10-10
-
微信小程序開發(fā)注意指南和優(yōu)化實踐(小結(jié))
這篇文章主要介紹了微信小程序開發(fā)注意指南和優(yōu)化實踐,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧 2019-06-06
最新評論
前言:
做小程序有一段時間了,總結(jié)一下做過的技術(shù)點,特此貢獻給小伙伴們!項目中,有圖片存儲、視頻存儲、錄音存儲這三個需要云對接存儲。
一、圖片/視頻/錄音上傳七牛對接
準(zhǔn)備工作:
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_toke', 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、圖片上傳七牛
通過小程序的方法,為用戶提供添加本地圖片,或者拍照,之后你會得到方法返回的圖片臨時路徑。我們可以把圖片維護在一個數(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可以用來刪除當(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) => {
//上傳成功,上傳成功一張圖片,進入一次這個方法,也就是返回一次
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:準(zhǔn)備上傳的圖片臨時地址數(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ù)器。目前就只能這么辦了。
這里是小程序?qū)悠吲T拼鎯Φ墓俜轿臋n:
https://github.com/gpake/qiniu-wxapp-sdk/blob/master/README.md?ref=developer.qiniu.com
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript判斷數(shù)組是否包含指定元素的方法
這篇文章主要介紹了JavaScript判斷數(shù)組是否包含指定元素的方法,涉及javascript中contains方法的使用技巧,需要的朋友可以參考下2015-07-07
js獲取html的span標(biāo)簽的值方法(超簡單)
下面小編就為大家?guī)硪黄猨s獲取html的span標(biāo)簽的值方法(超簡單)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-07-07
jquery的$getjson調(diào)用并獲取遠程的JSON字符串問題
jQuery中常用getJSON來調(diào)用并獲取遠程的JSON字符串,將其轉(zhuǎn)換為JSON對象,如果成功,則執(zhí)行回調(diào)函數(shù),本文將詳細介紹,需要的朋友可以參考下2012-12-12
D3.js 從P元素的創(chuàng)建開始(顯示可加載數(shù)據(jù))
D3是一個基于數(shù)據(jù)操作的可視化js庫,認識d3,就從最基礎(chǔ)的顯示可加載數(shù)據(jù)談起,需要的朋友可以參考下2014-10-10
微信小程序開發(fā)注意指南和優(yōu)化實踐(小結(jié))
這篇文章主要介紹了微信小程序開發(fā)注意指南和優(yōu)化實踐,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-06-06

