微信小程序遇到的坑系列---小程序上传图片线上失败

微信小程序中，上传图片的代码如下：

实现功能：

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

然后就解决啦