微信小程序上传图片到服务器总是失败_微信小程序上传图片到服务器实例
这一篇主要说头像 上传,以及修改保存的功能。本章节主要用的知识点有
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 对象
我这里先贴官方是例子出来。
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
}
})
}
})
是否看到这里对选择图片和上传的接口了解很多,
第三步:代码实现
接下来这里就是真正的操作代码,为了大家方便看,我这里都注释了代码:
没修改之前。 修改后并保存数据库
这里的样式自已调
头像
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
微信小程序上传图片到服务器总是失败_微信小程序上传图片到服务器实例相关推荐
- 微信小程序上传图片到服务器总是失败_微信小程序上传图片过大导致请求失败的解决方法...
很多时候我们都会碰到小程序上传图片时因为图片过大而导致请求失败,同时出现各种各样的问题,那么今天来给大家写一个微信小程序上传图片过大导致请求失败的完美解决办法. 以云开发小程序图片检测为例,如果图片过 ...
- 微信小程序上传图片到服务器总是失败_微信小程序怎么上传图片到服务器?
微信小程序怎么上传图片到服务器?相信很多人都会把小程序图片保存到本地吧,但是把图片上传到服务器就不一定了,下面一起随小编看看微信小程序怎么上传图片到服务器吧. 微信小程序怎么上传图片到服务器? 首先, ...
- 微信小程序python解析获取用户手机号_微信小程序获取用户手机号
获取微信用户绑定的手机号,需先调用wx.login接口. 小程序获取code. 后台得到session_key,openid. 组件触发getPhoneNumber 因为需要用户主动触发才能发起获取手 ...
- 微信小程序销毁某一注册函数_微信小程序注销手册
微信小程序一直存在一个问题:开发者不能注销自己的小程序. 之前当开发者需要彻底清除小程序信息时,只能够通过暂停服务或关闭"允许被搜索"的方式曲线救国.现在,这个问题终于解决了. 在 ...
- 微信小程序 界面从右边滑出_微信小程序--左滑右滑的乐趣
左滑 右滑 你不再是一个人 无论你是一个程序猿还是一个程序媛,每天干的事除了coding还是coding,代码不能解决的问题(什么问题自己心里还没点abcd数嘛),探探能帮你解决.最近网上特流行一款交 ...
- 微信小程序可以用python开发吗_微信小程序可以用python开发吗
现有业务主要包括小程序开发及运营推广,APP开发,公众号开发以及H5开发,提供微信小程序开发.朋友圈广告.微信支付等服务,协助企业数字化转型,打造智能化.智慧化的商业体系 尤其是一些品牌的云服务器的价 ...
- 微信小程序识别图片并提取文字_微信小程序(图像识别,文字识别)
1. ''你知道为什么海水是蓝色的吗?''''因为海里有鱼''''有鱼跟海水是蓝的有毛关系''''因为鱼会吐泡泡..''''??''''吐泡泡就是..卟噜(blue)卟噜(blue)卟噜(blue)卟 ...
- 小程序分享到朋友圈功能_微信小程序开放分享到朋友圈功能
2020年7月7日(据说是6日深夜),一个很特别的日子,微信低调地放开了一个功能:微信小程序"分享到到朋友圈",这个看似微小的变化,对微信小程序来说意义重大. 用fenng大的话说 ...
- 小程序内嵌h5页面分享_微信小程序webview内页面分享
因为项目原因,之前在微信小程序内部使用 webview 嵌套了 h5 页面,现在要添加一个新的功能,用户在哪个页面进行了分享,被分享的用户从链接进来就跳转到哪个分享页面. 先了解一下 web-view ...
- 小程序流量主能赚多少_微信:6月1日起调整小程序和公众号流量主广告收入分成比例...
图片版权所属:站长之家 站长之家(ChinaZ.com) 5月31日 消息:今日,微信广告官方账号"微信广告助手"发布了微信广告流量主分成政策调整公告.微信广告助手称, 2019 ...
最新文章
- VUE -- Mac上解决Chrome浏览器跨域问题
- oracle监听 客户 实例,oracle 数据库实例 监听
- GDB调试精粹及使用实例
- 1.安装flink-1.12.2
- java easyui 分页_Spring mvc+easyui做列表展示及分页
- WatchStor观察:冰岛身陷困境也不会停止数据中心项目
- ImportError: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `CXXABI_1.3.9‘ not found
- noip2013解题报告
- DP1363F多协议高射频与CLRC663软硬件开发无需修改资料
- Undefined与Null的区别
- redhat8.2-docker安装及部分镜像下载
- 接口测试一般都需要注意哪些方面
- 央行等8部委发文规范供应链金融,严禁无牌开展相关业务
- 分段式多级离心泵_分段式多级离心泵的组装与调整
- 新家未来验房电子报告版本第三代更新,验房师专业电子报告
- 【名称解释】上解中央支出
- 网络游戏服务器之 日志系统
- 10. Yii 2.0 Session
- 有没有让你相见恨晚的(高考)教辅书?
- 2018.7.17 绍兴一中模拟赛 解题报告