时间:2021-07-01 10:21:17 帮助过:100人阅读
上传头像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
相信看了以上介绍你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
相关阅读:
ES6 javascript中类的静态方法,属性与实例属性怎么使用
Bootstrap如何做出栅格系统
JS怎么做出选项卡
以上就是微信小程序怎么上传头像的详细内容,更多请关注Gxl网其它相关文章!