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

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

浏览量:628 时间: 来源:shadow_yi_0416

微信小程序中,上传图片的代码如下:

实现功能:

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

然后就解决啦

 

微信小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎