微信小程序中,上传图片的代码如下:
实现功能:
1.上传图片到七牛云
2.上传成功后,对于返回的路径展示到页面
3.将返回的路径发送给后端
对于第一个需求:
1.上传图片到七牛云
我们需要在七牛云上有一个账号去存自己的图片,于是不能忽略的一步,就是在进入页面时候,获取到七牛云的token
2.上传成功后,对于返回的路径展示到页面
这里又分为两个需求:
②将上传成功后的图片展示到页面上;
upzhengmian: function () {
var that = this
①上传图片到七牛云;
wx.chooseImage({
count: 1,
success: function (res) {
console.log(app.data.uptoken)
var tempFilePaths = res.tempFilePaths[0]
这里的token是第一步获取到的uptoken,写在app.js里面的
let token = app.data.uptoken;
wx.uploadFile({
这里配置的接口是上传图片的接口,但是这里有一个坑,后面会说;
url: ‘http:....../upload’,
name: 'file',
filePath: tempFilePaths,
header: {
"Content-Type": "multipart/form-data"
},
formData: {
token: encodeURI(token),
},
success: function (res) {
这一步就是上传成功后,展示到页面上了
that.data.img1 = config.systemData.QiNiuUrl + '/' + JSON.parse(res.data).hash
that.setData({
img1: that.data.img1
})
},
fail: function (res) {
wx.showModal({
title: '',
content: '上传身份证失败,请重新上传',
duration: '2000'
})
}
})
},
fail: function (res) {
}
})
},
写到这一步,其实已经可以实现在开发工具上上传图片了,于是我们上传了代码到体验版的时候,图片就上传失败了。
配置地址没问题的情况下,就是不对;
其实问题并不大,只需要把开发工具上的地址配置检查是否是https:就可以了,因为微信小程序所有的配置合法域名都是https
然后就解决啦