小程序模板网

微信小程序上传头像

发布时间:2018-04-25 09:28 所属栏目:小程序开发教程

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

上传头像html:

 

				
  1. <view class="edit-list">
  2.   <text class="list-name list-first">头像</text>
  3.     <view class="edit-righr-bar">
  4.     <image class="head-portrait" src="{{avatar}}" bindtap='changeAvatar'></image>
  5.   </view>
  6. </view>

js代码:

 

				
  1. // 切换头像
  2. changeAvatar: function () {
  3. var that = this;
  4. // var childId = wx.getStorageSync("child_id");
  5. // var token = wx.getStorageSync('token');
  6. wx.chooseImage({
  7. count: 1, // 最多可以选择的图片张数,默认9
  8. sizeType: ['compressed'], // original 原图,compressed 压缩图,默认二者都有
  9. sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
  10. success: function (res) {
  11. console.log(res.tempFilePaths + "修改页面")
  12. var avatar = res.tempFilePaths;
  13. that.setData({
  14. avatar: avatar,
  15. upAvatar:true
  16. })
  17.  
  18. },
  19. fail: function () {
  20. // fail
  21. },
  22. complete: function () {
  23. // complete
  24. }
  25. })
  26. },
  27. 这是是调用上传头像uploadFile方法
  28. // 上传头像
  29. app.uploadimg({
  30. url: 'URL地址',
  31. path: avatar,
  32. header: {
  33. 'Content-Type': 'multipart/form-data',
  34. "Authorization": "Bearer " + token
  35. },
  36. isShow: false
  37. });
  38.  
  39. 上传头像代码uploadFile做了一个封装 代码放在APP.js里
  40. //多张图片上传
  41. uploadimg:function(data){
  42. var that= this,
  43. i=data.i ? data.i : 0,
  44. success=data.success ? data.success : 0,
  45. fail=data.fail ? data.fail : 0;
  46. wx.uploadFile({
  47. url: data.url,
  48. filePath: data.path[i],
  49. name: 'fileData',//这里根据自己的实际情况改
  50. header: data.header,
  51. formData: {
  52. sequence:i+1
  53. },
  54. success: (resp) => {
  55. success++;
  56. console.log(resp)
  57. console.log(i+"成功");
  58.  
  59.  
  60. }
  61.  
  62. },
  63. fail: (res) => {
  64. fail++;
  65. console.log('fail:' + i + "fail:" + fail);
  66. },
  67. complete: () => {
  68. console.log(i);
  69. i++;
  70. if (i == data.path.length) { //当图片传完时,停止调用
  71. console.log('执行完毕');
  72. console.log('成功:' + success + " 失败:" + fail);
  73.  
  74. } else {//若图片还没有传完,则继续调用函数
  75. console.log(i);
  76. data.i = i;
  77. data.success = success;
  78. data.fail = fail;
  79. that.uploadimg(data);
  80. }
  81.  
  82. }
  83. });
  84. },


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23983.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询