微信小程序上传图片到服务器实例
这一篇主要说头像 上传,以及修改保存的功能。本章节主要用的知识点有
1. wx.chooseImage 从本地相册选择图片或使用相机拍照。
2.wx.uploadFile 将本地资源上传到服务器.
3. 修改原来的小程序头像并保存,调用后台接口修改操作
第一步:我们要获取本地图片,官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/media-picture.html#wxchooseimageobject
我这里也贴出来了,不够详细可以去官网看。
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 对象 | 1.2.0 |
我这里先贴官方是例子出来。
wx.chooseImage({
count: 1, // 默认9
sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图,默认二者都有
sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths
}
})
第二步:
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
}
})
}
})
是否看到这里对选择图片和上传的接口了解很多,
第三步:代码实现
接下来这里就是真正的操作代码,为了大家方便看,我这里都注释了代码:
没修改之前。 修改后并保存数据库
这里的样式自已调
<view class="my-item" style=‘height:60px;line-height:60px;margin-top:10px‘ bindtap="changeAvatar"> <text>头像</text> <view class="language"> <image class="userinfo-avatar" src="{{user.avatar}}" background-size="cover"></image> </view>
js模块,
注意:
wx.uploadFile自已有一个this,我们格外定义的var _this = this 到时候赋值的时候把this带进来就OK了。
//点击图片选择手机相册或者电脑本地图片 changeAvatar: function(e) { var _this = this wx.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] }); } }, }) } } }) } }) },
这样就实现了修改小程序的头像了,希望帮到正在奋斗的你,遇见更好的你。
这篇文章哪里还不足的话,希望路过的大神指点指点小弟。