微信小程序 上傳頭像的實(shí)例詳解
微信小程序 上傳頭像的實(shí)例詳解
最近在做微信小程序上傳頭像和上傳照片功能就隨手寫一下代碼:
上傳頭像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ù),默認(rèn)9 sizeType: ['compressed'], // original 原圖,compressed 壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // album 從相冊(cè)選圖,camera 使用相機(jī),默認(rèn)二者都有 success: function (res) { console.log(res.tempFilePaths + "修改頁(yè)面") 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做了一個(gè)封裝 代碼放在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ù)自己的實(shí)際情況改 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) { //當(dāng)圖片傳完時(shí),停止調(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 提交默認(rèn)是post方法,后臺(tái)給的接口的時(shí)候需要后臺(tái)做成post
如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
arcgis?js完整懸停效果實(shí)現(xiàn)demo
這篇文章主要為大家介紹了arcgis?js完整懸停效果實(shí)現(xiàn)demo詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點(diǎn)擊樣式實(shí)例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)給循環(huán)列表添加點(diǎn)擊樣式實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-04-04TypeScript?泛型推斷實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了TypeScript?泛型推斷實(shí)現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-085種方法告訴你如何使JavaScript 代碼庫(kù)更干凈
J avaScript無處不在,從PC端到移動(dòng)設(shè)備端,甚至是后端,都在使用JavaSc ript。在本文中,將嘗試一些可用來使代碼看起來更簡(jiǎn)潔的實(shí)踐方案,希望能幫助到大家2021-09-09前端面試必會(huì)網(wǎng)絡(luò)跨域問題解決方法
這篇文章主要為大家介紹了前端面試必會(huì)的網(wǎng)絡(luò)跨域問題解決方法講解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07微信小程序getPhoneNumber獲取用戶手機(jī)號(hào)
這篇文章主要介紹了 微信小程序getPhoneNumber獲取用戶手機(jī)號(hào)的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09JavaScript中時(shí)間格式化新思路toLocaleString()
這篇文章主要介紹了JavaScript中時(shí)間格式化新思路toLocaleString(),研究Object對(duì)象的時(shí)候,看到了 toLocaleString() 這個(gè)方法可以很簡(jiǎn)單的實(shí)現(xiàn)時(shí)間格式化,下面來看看toLocaleString() 的詳細(xì)內(nèi)容吧,需要的朋友可以參考一下2021-11-11