微信小程序-拍照或選擇圖片并上傳文件
微信小程序-拍照或選擇圖片并上傳文件
調(diào)用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=20161222#wxchooseimageobject
上傳文件API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-file.html
主要js代碼:
choice: function () { var that = this wx.chooseImage({ count: 1, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相冊(cè)還是相機(jī),默認(rèn)二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths that.setData({ textHidden: true, image_photo: tempFilePaths, photoHidden: false }) } }) }, uploadPhoto: function () { var that = this let param = util.json2Form({ tel: '18600346580', orderSn: that.data.orderSn, parkingPhoto: that.data.image_photo, }); wx.uploadFile({ url: 'https://testapi.****.com/v4.0.0/uploadParkingPhoto', //僅為示例 filePath: that.data.image_photo[0], name: 'parkingPhoto', formData: { 'tel': '***********', 'orderSn': that.data.orderSn, }, success: function (res) { var obj = JSON.parse(res.data);; console.log(obj.result) console.log(obj.msg) var resule = obj.result; var msg = obj.msg; if (resule == 'false') { wx.showToast({ title: msg, icon: 'success', duration: 2000 }) } else { wx.navigateBack({ delta: 1, success: function (res) { wx.showToast({ title: msg, icon: 'success', duration: 2000 }) }, }) } } }) }
Tip:
1.調(diào)用wx.chooseImage() 自動(dòng)彈出選擇窗口,不用調(diào)用操作菜單wx.showActionSheet(),否則重復(fù)
如圖
2. 上傳文件的時(shí)候filePath必須是數(shù)組,當(dāng)你單張的時(shí)候需要使用數(shù)組,若只有一張要用[0]
3. 最需要注意的是,success返回?cái)?shù)據(jù)是String類型,我們需要將String類型轉(zhuǎn)換成Object
js字符串轉(zhuǎn)換成obj
用js 是有三種方法的
- js自帶的eval函數(shù),其中需要添加小括號(hào)eval('('+str+')');
- JSON.parse(str)
- $.parseJSON( jsonstr )
但是在微信小程序中,我們只能用JSON.parse(str),其他的都不可以
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
JavaScript專題之underscore防抖實(shí)例學(xué)習(xí)
這篇文章主要為大家介紹了JavaScript專題之underscore防抖實(shí)例學(xué)習(xí),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09微信小程序 scroll-view隱藏滾動(dòng)條詳解
這篇文章主要介紹了微信小程序 scroll-view隱藏滾動(dòng)條和跳轉(zhuǎn)頁面的相關(guān)資料,需要的朋友可以參考下2017-01-01移動(dòng)開發(fā)之自適應(yīng)手機(jī)屏幕寬度
這篇文章主要介紹了移動(dòng)開發(fā)之自適應(yīng)手機(jī)屏幕寬度的相關(guān)資料,網(wǎng)上關(guān)于這方面的文章有很多,重復(fù)的東西本文不再贅述,僅提供思路,并解釋一些其他文章講述模糊的地方,需要的朋友可以參考下2016-11-11