Heim >Web-Frontend >js-Tutorial >So laden Sie einen Avatar im WeChat-Applet hoch

So laden Sie einen Avatar im WeChat-Applet hoch

php中世界最好的语言
php中世界最好的语言Original
2017-12-31 11:34:194373Durchsuche

Was ich Ihnen dieses Mal bringe, ist eine detaillierte Erklärung des Beispiels zum Hochladen von Avataren im WeChat-Applet. Vor kurzem habe ich an der Funktion zum Hochladen von Avataren und Fotos im WeChat-Applet gearbeitet, also habe ich gerade etwas Code geschrieben . Dieser Artikel gibt Ihnen eine gute Analyse.

Avatar-HTML hochladen:

<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>

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);
} 
}
});
},

uploadFile-Übermittlung erfolgt standardmäßig auf die Post-Methode, und die vom Hintergrund bereitgestellte Schnittstelle muss dies tun im Hintergrundbeitrag gemacht werden

Ich glaube, dass Sie die Methode nach dem Lesen der obigen Einführung beherrschen. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie statische Methoden, Eigenschaften und Instanzeigenschaften von Klassen in ES6-Javascript

So erstellen Sie ein Raster mit Bootstrap-System

So erstellen Sie Tabs in JS

Das obige ist der detaillierte Inhalt vonSo laden Sie einen Avatar im WeChat-Applet hoch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn