微信小程序 上傳頭像的實例詳解
更新時間:2017年10月27日 14:42:51 作者:CrazyL1
這篇文章主要介紹了微信小程序 上傳頭像的實例詳解的相關資料,希望通過本文能幫助到大家,讓大家實現(xiàn)這樣的功能,需要的朋友可以參考下
微信小程序 上傳頭像的實例詳解
最近在做微信小程序上傳頭像和上傳照片功能就隨手寫一下代碼:
上傳頭像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, // 最多可以選擇的圖片張數(shù),默認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 } }) }, 這是是調(diào)用上傳頭像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',//這里根據(jù)自己的實際情況改 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) { //當圖片傳完時,停止調(diào)用 console.log('執(zhí)行完畢'); console.log('成功:' + success + " 失?。? + fail); } else {//若圖片還沒有傳完,則繼續(xù)調(diào)用函數(shù) console.log(i); data.i = i; data.success = success; data.fail = fail; that.uploadimg(data); } } }); },
uploadFile 提交默認是post方法,后臺給的接口的時候需要后臺做成post
如有疑問請留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對本站的支持!
相關文章
微信小程序實現(xiàn)給循環(huán)列表添加點擊樣式實例
這篇文章主要介紹了微信小程序實現(xiàn)給循環(huán)列表添加點擊樣式實例的相關資料,需要的朋友可以參考下2017-04-04JavaScript中時間格式化新思路toLocaleString()
這篇文章主要介紹了JavaScript中時間格式化新思路toLocaleString(),研究Object對象的時候,看到了 toLocaleString() 這個方法可以很簡單的實現(xiàn)時間格式化,下面來看看toLocaleString() 的詳細內(nèi)容吧,需要的朋友可以參考一下2021-11-11