需求
- 上傳圖片到服務器，在不同的設備上顯示
實現難點
有以下記錄點可以作為參考
- 常規思路解決問題時的不可行之處，比如實現過程中的報錯，踩坑等
- 實現需求時的思路卡殼位置
思路分析
- wx.uploadFile(Object object)將本地資源上傳到開發者服務器，客戶端發起一個 HTTPS POST請求，注意該請求的對象為測試服，而后臺搭建一個圖片上傳的服務器比較麻煩，因此選擇使用方便的七牛云
- 小程序的請求為https，因此與管理后臺的圖片上傳有所區別，但實現方法本質是一樣的
- 如何使用七牛云的服務，查看官方文檔，或者百度看別人的教程，下面是我在topshow這個項目中使用的方法
實現
實現該需求可以分為以下4步
克隆 gpake/qiniu-wxapp-sdk 倉庫: git clone https://github.com/gpake/qiniu-wxapp-sdk.git
在 SDK 目錄下找到 qiniuUploader.js 文件，在需要使用上傳功能的頁面引用 qiniuUploader.js 文件， 該方法四個參數，上傳成功的回調函數返回了成功上傳圖片的鏈接
-
獲取七牛直傳的token，調取后臺接口文檔七牛模塊的前端使用接口，獲取token和域名
獲取token的接口和上傳七牛云的接口涉及到一個異步變同步操作的問題，因此引用了promise對象
調七牛直傳的接口，具體實現代碼如下：
//app.js中 獲取七牛直傳的token，注意promise對象的使用
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; //選擇了多張圖片，但由于上傳七牛云是單張上傳，因此需要循環調接口，注意是調兩個接口，獲取直傳token和七牛直傳的接口
tempFilePaths.map((r,i) => {
app.fetchUptoken().then(function(res){ //異步變同步
let uptoken = res.data.token
//使用引入的qiniuUploader方法調七牛上傳的接口
qiniuUploader.upload(
r, //上傳的圖片
(res) => { //回調 success
console.log(res)
uploadPicture.push(res.imageURL);
that.setData({
uploadPicture,
})
i == tempFilePaths.length - 1 && (
that.uploadImage()
)
}, (error) => { //回調 fail
console.log('error: ' + error);
},
{ // 參數設置 地區代碼 token domain 和直傳的鏈接 注意七牛四個不同地域的鏈接不一樣，我使用的是華南地區
region: 'SCN',
uptoken: uptoken,
uploadURL: 'https://up-z2.qbox.me',
domain: 'http://ovkzx61hi.bkt.clouddn.com/',
})
})
})
}
})
},
- 這樣我們就拿到圖片在七牛云上的地址鏈接了 -- uploadPicture
備注
- 以上的內容僅為前端的參考，后臺是實現的部分包括直傳token，和域名domain
- 大概了解了一下這個domain是公司申請的
- 小程序現在還沒有配置域名，后續需要將配置直傳的鏈接
往期精彩回顧
- Ant Design 組件 —— Form表單（一)
- Ant Design 組件 —— Form表單（二)
- CMS管理后臺入門指南 (Ant Design Pro v2.0)
- 實現點擊下載文件的幾種方法
- 在https中引入http資源所導致的問題
廣州蘆葦科技web前端
