微信小程序 上传头像的实例详解


Posted in Javascript onOctober 27, 2017

微信小程序 上传头像的实例详解

最近在做微信小程序上传头像和上传照片功能就随手写一下代码:

微信小程序 上传头像的实例详解

 上传头像html:

<view class="edit-list">
<text class="list-name list-first">头像</text>


<view class="edit-righr-bar">


<image class="head-portrait" src="{{avatar}}" bindtap='changeAvatar'></image>

</view>
</view>

js代码:

// 切换头像
changeAvatar: function () {
var that = this;
// var childId = wx.getStorageSync("child_id");
// var token = wx.getStorageSync('token');
wx.chooseImage({
count: 1, // 最多可以选择的图片张数,默认9
sizeType: ['compressed'], // original 原图,compressed 压缩图,默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
success: function (res) {
console.log(res.tempFilePaths + "修改页面")
var avatar = res.tempFilePaths;
that.setData({
avatar: avatar,
upAvatar:true
})
 
},
fail: function () {
// fail
},
complete: function () {
// complete
}
})
},
这是是调用上传头像uploadFile方法
// 上传头像
app.uploadimg({
url: 'URL地址',
path: avatar,
header: {
'Content-Type': 'multipart/form-data',
"Authorization": "Bearer " + token
},
isShow: false
});
 
上传头像代码uploadFile做了一个封装 代码放在APP.js里
//多张图片上传
uploadimg:function(data){
var that= this,
i=data.i ? data.i : 0,
success=data.success ? data.success : 0,
fail=data.fail ? data.fail : 0;
wx.uploadFile({
url: data.url,
filePath: data.path[i],
name: 'fileData',//这里根据自己的实际情况改
header: data.header,
formData: {
sequence:i+1
},
success: (resp) => {
success++;
console.log(resp)
console.log(i+"成功");
 
 
}
 
},
fail: (res) => {
fail++;
console.log('fail:' + i + "fail:" + fail);
},
complete: () => {
console.log(i);
i++;
if (i == data.path.length) { //当图片传完时,停止调用
console.log('执行完毕');
console.log('成功:' + success + " 失败:" + fail);
 
} else {//若图片还没有传完,则继续调用函数
console.log(i);
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);
}

}
});
},

 uploadFile 提交默认是post方法,后台给的接口的时候需要后台做成post

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
javascript定义函数的方法
Dec 06 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
js实现字符串转日期格式的方法
May 20 Javascript
JavaScript访问字符串中单个字符的两种方法
Jul 03 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
JS时间特效最常用的三款
Aug 19 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
Jun 12 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
Jan 16 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
vue使用showdown并实现代码区域高亮的示例代码
Oct 17 Javascript
node.js使用http模块创建服务器和客户端完整示例
Feb 10 Javascript
探讨Vue.js的组件和模板
Oct 27 #Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 #jQuery
关于jQuery里prev()的简单操作代码
Oct 27 #jQuery
JS获取数组中出现次数最多及第二多元素的方法
Oct 27 #Javascript
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 #Javascript
Express系列之multer上传的使用
Oct 27 #Javascript
微信小程序返回多级页面的实现方法
Oct 27 #Javascript
You might like
浅谈discuz密码加密的方式
2014/05/22 PHP
PHP实现的登录,注册及密码修改功能分析
2016/11/25 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
jQuery的一些特性和用法整理小结
2010/01/13 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
六款帮助你实现惊艳视差滚动效果的jQuery插件
2012/09/14 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
详解JavaScript中的blink()方法的使用
2015/06/08 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
Javarscript中模块(module)、加载(load)与捆绑(bundle)详解
2017/05/28 Javascript
10个最受欢迎的 JavaScript框架(推荐)
2019/04/24 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
Vuex模块化应用实践示例
2020/02/03 Javascript
JS JQuery获取data-*属性值方法解析
2020/09/01 jQuery
[01:36:19]Secret vs NB 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python如何通过实例方法名字调用方法
2018/03/21 Python
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
详解Python中namedtuple的使用
2020/04/27 Python
Django之全局使用request.user.username的实例详解
2020/05/14 Python
Python中内建模块collections如何使用
2020/05/27 Python
python中绕过反爬虫的方法总结
2020/11/25 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
HTML5之SVG 2D入门1—SVG(可缩放矢量图形)概述
2013/01/30 HTML / CSS
英国最大的女士服装零售商:Bonmarché
2017/08/17 全球购物
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
大一军训感言
2014/01/09 职场文书
父亲八十大寿答谢词
2014/01/23 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
帮一个朋友写的求职信
2014/08/09 职场文书
教师个人考察材料
2014/12/16 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript