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

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

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

上传头像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

web前端开发upload上传头像js示例代码

php实现手机拍照上传头像功能

PHP调整Jcrop截取的上传头像功能

以上就是微信小程序实现上传头像详解的详细内容，更多内容请关注技术你好其它相关文章！