この記事では、WeChat ミニ プログラムでのアバターのアップロードの詳細な例に関する関連情報を主に紹介します。この記事が、このような機能を必要とする友人の参考になれば幸いです。
WeChat ミニ プログラムでのアバターのアップロードの例詳細な説明
最近、WeChat アプレットのアバターのアップロードと写真のアップロード機能に取り組んでいたので、コードを書きました:
アバターの 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 Submission はデフォルトで post メソッドになります。background が提供するインターフェイスを提供する場合、background を post にする必要があります。 以上がこの記事の全内容です。皆様の学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。
関連する推奨事項:
WeChatミニプログラムにローリングメッセージ通知を実装オンラインのWeChatミニプログラムによってリクエストされたカルーセル画像WeChatミニプログラムに複数の写真アップロード機能を実装以上がWeChatミニプログラムでアバターをアップロードするためのコードについての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。