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


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 相关文章推荐
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
Jan 17 Javascript
javascript中String类的subString()方法和slice()方法
May 24 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
js制作支付倒计时页面
Oct 21 Javascript
搭建Bootstrap离线文档的方法
Dec 02 Javascript
jQuery简易时光轴实现方法示例
Mar 13 Javascript
JavaScript运动框架 链式运动到完美运动(五)
May 18 Javascript
详解ES6 export default 和 import语句中的解构赋值
May 28 Javascript
javascript实现图片轮换动作方法
Aug 07 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
TS 类型收窄教程示例详解
Sep 23 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
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
php单一接口的实现方法
2015/06/20 PHP
PHP静态延迟绑定和普通静态效率的对比
2017/10/20 PHP
PHP实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 2异步获取节点)
2007/03/10 Javascript
JavaScript建立一个语法高亮输入框实现思路
2013/02/26 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
超炫的jquery仿flash导航栏特效
2014/11/11 Javascript
项目实践一图片上传之form表单还是base64前端图片压缩(前端图片压缩)
2016/07/28 Javascript
AngularJs Forms详解及简单示例
2016/09/01 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
JS常用知识点整理
2017/01/21 Javascript
Bootstrap DateTime Picker日历控件简单应用
2017/03/25 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
vue实现文件上传功能
2018/08/13 Javascript
JS实现普通轮播图特效
2020/01/01 Javascript
es6 for循环中let和var区别详解
2020/01/12 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
JS继承实现方法及优缺点详解
2020/09/02 Javascript
[31:47]夜魇凡尔赛茶话会 第三期01:选手知多少
2021/03/11 DOTA
Python实现的矩阵类实例
2017/08/22 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
python 画图 图例自由定义方式
2020/04/17 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
数百万免费的图形资源:Freepik
2020/09/21 全球购物
儿科护理实习自我鉴定
2013/09/19 职场文书
爱晚亭导游词
2015/02/09 职场文书
中学教师教学工作总结
2015/08/13 职场文书
导游词之扬州大明寺
2019/10/09 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
PHP面试题 wakeup魔法 Ezpop pop序列化与反序列化
2022/04/11 PHP