需求
- 上傳圖片到服務(wù)器，在不同的設(shè)備上顯示
實(shí)現(xiàn)難點(diǎn)
有以下記錄點(diǎn)可以作為參考
- 常規(guī)思路解決問題時(shí)的不可行之處膏斤，比如實(shí)現(xiàn)過程中的報(bào)錯(cuò)，踩坑等
- 實(shí)現(xiàn)需求時(shí)的思路卡殼位置
思路分析
- wx.uploadFile(Object object)將本地資源上傳到開發(fā)者服務(wù)器逮京，客戶端發(fā)起一個(gè) HTTPS POST請(qǐng)求，注意該請(qǐng)求的對(duì)象為測(cè)試服盅安，而后臺(tái)搭建一個(gè)圖片上傳的服務(wù)器比較麻煩，因此選擇使用方便的七牛云
- 小程序的請(qǐng)求為https世囊，因此與管理后臺(tái)的圖片上傳有所區(qū)別别瞭，但實(shí)現(xiàn)方法本質(zhì)是一樣的
- 如何使用七牛云的服務(wù)，查看官方文檔株憾，或者百度看別人的教程蝙寨，下面是我在topshow這個(gè)項(xiàng)目中使用的方法
實(shí)現(xiàn)
實(shí)現(xiàn)該需求可以分為以下4步
克隆 gpake/qiniu-wxapp-sdk 倉庫: git clone https://github.com/gpake/qiniu-wxapp-sdk.git
在 SDK 目錄下找到 qiniuUploader.js 文件，在需要使用上傳功能的頁面引用 qiniuUploader.js 文件嗤瞎， 該方法四個(gè)參數(shù)墙歪，上傳成功的回調(diào)函數(shù)返回了成功上傳圖片的鏈接
-
獲取七牛直傳的token，調(diào)取后臺(tái)接口文檔七牛模塊的前端使用接口贝奇，獲取token和域名
獲取token的接口和上傳七牛云的接口涉及到一個(gè)異步變同步操作的問題虹菲，因此引用了promise對(duì)象
調(diào)七牛直傳的接口，具體實(shí)現(xiàn)代碼如下：
//app.js中 獲取七牛直傳的token掉瞳，注意promise對(duì)象的使用
fetchUptoken: function () {
return new Promise(function(resolve, reject){
wx.request({
url: API.Qiniu.token,
data: {},
success: function(res){
// success
console.log(res.data.token)
resolve(res)
},
fail: function() {
// fail
},
complete: function() {
// complete
}
})
})
},
//上傳圖片的page中
handleUploadImage: function () {
const qiniuUploader = require("../../utils/qiniuUploader");
let that = this;
let {
uploadPicture
} = that.data
// 通過微信的api選擇圖片毕源，暫存到本地文件夾，并且通過路徑名可以拿到該圖片
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: function (res) {
let tempFilePaths = res.tempFilePaths; //選擇了多張圖片陕习，但由于上傳七牛云是單張上傳霎褐，因此需要循環(huán)調(diào)接口，注意是調(diào)兩個(gè)接口该镣，獲取直傳token和七牛直傳的接口
tempFilePaths.map((r,i) => {
app.fetchUptoken().then(function(res){ //異步變同步
let uptoken = res.data.token
//使用引入的qiniuUploader方法調(diào)七牛上傳的接口
qiniuUploader.upload(
r, //上傳的圖片
(res) => { //回調(diào) success
console.log(res)
uploadPicture.push(res.imageURL);
that.setData({
uploadPicture,
})
i == tempFilePaths.length - 1 && (
that.uploadImage()
)
}, (error) => { //回調(diào) fail
console.log('error: ' + error);
},
{ // 參數(shù)設(shè)置 地區(qū)代碼 token domain 和直傳的鏈接 注意七牛四個(gè)不同地域的鏈接不一樣瘩欺，我使用的是華南地區(qū)
region: 'SCN',
uptoken: uptoken,
uploadURL: 'https://up-z2.qbox.me',
domain: 'http://ovkzx61hi.bkt.clouddn.com/',
})
})
})
}
})
},
- 這樣我們就拿到圖片在七牛云上的地址鏈接了 -- uploadPicture
備注
- 以上的內(nèi)容僅為前端的參考，后臺(tái)是實(shí)現(xiàn)的部分包括直傳token拌牲，和域名domain
- 大概了解了一下這個(gè)domain是公司申請(qǐng)的
- 小程序現(xiàn)在還沒有配置域名，后續(xù)需要將配置直傳的鏈接
往期精彩回顧
- Ant Design 組件 —— Form表單（一)
- Ant Design 組件 —— Form表單（二)
- CMS管理后臺(tái)入門指南 (Ant Design Pro v2.0)
- 實(shí)現(xiàn)點(diǎn)擊下載文件的幾種方法
- 在https中引入http資源所導(dǎo)致的問題
廣州蘆葦科技web前端
