微信小程序上传图片到服务器总是失败_微信小程序上传图片到服务器实例

这一篇主要说头像 上传,以及修改保存的功能。本章节主要用的知识点有

1. wx.chooseImage 从本地相册选择图片或使用相机拍照。

2.wx.uploadFile 将本地资源上传到服务器.

3. 修改原来的小程序头像并保存,调用后台接口修改操作

我这里也贴出来了,不够详细可以去官网看。

1、选择图片接口

wx.chooseImage(OBJECT) 从本地相册选择图片或使用相机拍照。

OBJECT参数说明:

参数类型必填说明

count

Number

最多可以选择的图片张数,默认9

sizeType

StringArray

original 原图,compressed 压缩图,默认二者都有

sourceType

StringArray

album 从相册选图,camera 使用相机,默认二者都有

success

Function

成功则返回图片的本地文件路径列表 tempFilePaths

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数类型说明最低版本

tempFilePaths

StringArray

图片的本地文件路径列表

tempFiles

ObjectArray

图片的本地文件列表,每一项是一个 File 对象

我这里先贴官方是例子出来。

2b65ef29a5872cc0e4771c25889edd04.gif

6a087676c59fa8b19d76e6bb55a32902.gif

wx.chooseImage({

count: 1, // 默认9

sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有

sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有

success: function (res) {

// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

var tempFilePaths = res.tempFilePaths

}

})

View Code

第二步:

2、上传图片接口 wx.uploadFile(OBJECT)

将本地资源上传到开发者服务器。我们通过 wx.chooseImage 等接口获取到一个本地资源的临时文件路径后,可通过此接口将本地资源上传到指定服务器。客户端发起一个 HTTPS POST 请求,其中content-type 为multipart/form-data 。

OBJECT参数说明:

参数类型必填说明

url

String

开发者服务器 url

filePath

String

要上传文件资源的路径

name

String

文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容

header

Object

HTTP 请求 Header, header 中不能设置 Referer

formData

Object

HTTP 请求中其他额外的 form data

success

Function

接口调用成功的回调函数

fail

Function

接口调用失败的回调函数

complete

Function

接口调用结束的回调函数(调用成功、失败都会执行)

success返回参数说明:

参数类型说明

data

String

开发者服务器返回的数据

statusCode

Number

开发者服务器返回的 HTTP 状态码

官方实例代码:

wx.chooseImage({

success: function(res) {

var tempFilePaths = res.tempFilePaths

wx.uploadFile({

url: ‘https://example.weixin.qq.com/upload‘, //仅为示例,非真实的接口地址

filePath: tempFilePaths[0],

name: ‘file‘,

formData:{

‘user‘: ‘test‘

},

success: function(res){

var data = res.data

//do something

}

})

}

})

是否看到这里对选择图片和上传的接口了解很多,

第三步:代码实现

接下来这里就是真正的操作代码,为了大家方便看,我这里都注释了代码:

没修改之前。                                                           修改后并保存数据库

a0427c1f1cbee7e2769a116b64d67d71.png

9c200086e936c2973b4f57a6906b61c7.png

这里的样式自已调

头像

js模块,

注意:

wx.uploadFile自已有一个this,我们格外定义的var _this = this 到时候赋值的时候把this带进来就OK了。

//点击图片选择手机相册或者电脑本地图片

changeAvatar: function(e) {var _this = thiswx.chooseImage({

count:1,//默认9

sizeType: [‘original‘, ‘compressed‘],//可以指定是原图还是压缩图,默认二者都有

sourceType: [‘album‘, ‘camera‘],//可以指定来源是相册还是相机,默认二者都有

success: function(res) {//返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片

var tempFilePaths =res.tempFilePaths;//这里是上传操作

wx.uploadFile({

url: getApp().globalData.clientUrl+ ‘/uploadAvatarUrl‘, //里面填写你的上传图片服务器API接口的路径

filePath: tempFilePaths[0],//要上传文件资源的路径 String类型

name: ‘avatar‘,//按个人情况修改,文件对应的 key,开发者在服务器端通过这个 key 可以获取到文件二进制内容,(后台接口规定的关于图片的请求参数)

header: {"Content-Type": "multipart/form-data"//记得设置

},

formData: {//和服务器约定的token, 一般也可以放在header中

‘session_token‘: wx.getStorageSync(‘session_token‘)

},

success:function(res) {//当调用uploadFile成功之后,再次调用后台修改的操作,这样才真正做了修改头像

if (res.statusCode = 200) {//var data = res.data

//var statusCode = res.statusCode

//console.log("返回值1" + data);

//console.log("返回值2" + statusCode)

//这里调用后台的修改操作, tempFilePaths[0],是上面uploadFile上传成功,然后赋值到修改这里。

wx.request({

url: getApp().globalData.clientUrl+ ‘/update?avatar=‘ + tempFilePaths[0], //真正修改操作,填写你们修改的API

header: {‘content-type‘: ‘application/json‘,

},

method:‘POST‘,

success:function(res) {if (res.data.code == 200) {

wx.showToast({

title:‘修改成功‘,

icon:‘success‘,

duration: 2500})//wx.uploadFile自已有一个this,我们刚才上面定义的var _this = this 把this带进来

_this.setData({"user.avatar": tempFilePaths[0]

});

}

},

})

}

}

})

}

})

},

这样就实现了修改小程序的头像了,希望帮到正在奋斗的你,遇见更好的你。

这篇文章哪里还不足的话,希望路过的大神指点指点小弟。

原文:https://www.cnblogs.com/LCH-M/p/9420482.html

  • 1
    点赞
  • 4
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:深蓝海洋 设计师:CSDN官方博客 返回首页
评论

打赏作者

Lindsay Zou

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值