微信小程序 上传头像的实例详解
网络编程 2021-07-04 17:32www.168986.cn编程入门
这篇文章主要介绍了微信小程序 上传头像的实例详解的相关资料,希望通过本文能帮助到大家,让大家实现这样的功能,需要的朋友可以参考下
微信小程序 上传头像的实例详解
最近在做微信小程序上传头像和上传照片功能就随手写一下代码
上传头像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: ['pressed'], // original 原图,pressed 压缩图,默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有 suess: function (res) { console.log(res.tempFilePaths + "修改页面") var avatar = res.tempFilePaths; that.setData({ avatar: avatar, upAvatar:true }) }, fail: function () { // fail }, plete: function () { // plete } }) }, 这是是调用上传头像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, suess=data.suess ? data.suess : 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 }, suess: (resp) => { suess++; console.log(resp) console.log(i+"成功"); } }, fail: (res) => { fail++; console.log('fail:' + i + "fail:" + fail); }, plete: () => { console.log(i); i++; if (i == data.path.length) { //当图片传完时,停止调用 console.log('执行完毕'); console.log('成功' + suess + " 失败" + fail); } else {//若图片还没有传完,则继续调用函数 console.log(i); data.i = i; data.suess = suess; data.fail = fail; that.uploadimg(data); } } }); },
uploadFile 提交默认是post方法,后台给的接口的时候需要后台做成post
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
上一篇:微信小程序template模板实例详解
下一篇:探讨Vue.js的组件和模板
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程