About the code for uploading avatars in WeChat mini program-Mini Program Development-php.cn

About the code for uploading avatars in WeChat mini program

不言

Release： 2018-06-26 17:25:59

Original

5042 people have browsed it

This article mainly introduces the relevant information about the detailed examples of uploading avatars in the WeChat applet. I hope this article can help everyone realize such a function. Friends in need can refer to it

Detailed explanation of examples of uploading avatars in WeChat mini programs

Recently I am working on uploading avatars and uploading photos in WeChat mini programs, so I just wrote the code:

Upload avatar html:

<view class="edit-list">
　　<text class="list-name list-first">头像</text>
　　　　<view class="edit-righr-bar">
　　　　<image class="head-portrait" src="{{avatar}}" bindtap=&#39;changeAvatar&#39;></image>
　　</view>
</view>

Copy after login

js code:

// 切换头像
changeAvatar: function () {
var that = this;
// var childId = wx.getStorageSync("child_id");
// var token = wx.getStorageSync(&#39;token&#39;);
wx.chooseImage({
count: 1, // 最多可以选择的图片张数，默认9
sizeType: [&#39;compressed&#39;], // original 原图，compressed 压缩图，默认二者都有
sourceType: [&#39;album&#39;, &#39;camera&#39;], // 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: &#39;URL地址&#39;,
path: avatar,
header: {
&#39;Content-Type&#39;: &#39;multipart/form-data&#39;,
"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: &#39;fileData&#39;,//这里根据自己的实际情况改
header: data.header,
formData: {
sequence:i+1
},
success: (resp) => {
success++;
console.log(resp)
console.log(i+"成功");
 
 
}
 
},
fail: (res) => {
fail++;
console.log(&#39;fail:&#39; + i + "fail:" + fail);
},
complete: () => {
console.log(i);
i++;
if (i == data.path.length) { //当图片传完时，停止调用
console.log(&#39;执行完毕&#39;);
console.log(&#39;成功：&#39; + success + " 失败：" + fail);
 
} else {//若图片还没有传完，则继续调用函数
console.log(i);
data.i = i;
data.success = success;
data.fail = fail;
that.uploadimg(data);
}

}
});
},

Copy after login

uploadFile The default submission is the post method. When the interface is provided by the background, the background needs to be made into post

. The above is the entire content of this article. I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Implementation of rolling message notifications in WeChat applet

Carousel of network requests in WeChat applet Picture

Implementation of multiple picture upload function of WeChat applet

The above is the detailed content of About the code for uploading avatars in WeChat mini program. For more information, please follow other related articles on the PHP Chinese website!