需求
- 上传图片到服务器，在不同的设备上显示
实现难点
有以下记录点可以作为参考
- 常规思路解决问题时的不可行之处，比如实现过程中的报错，踩坑等
- 实现需求时的思路卡壳位置
思路分析
- 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前端
网友评论