微信小程序 圖片上傳實(shí)例詳解
一.了解wx.chooseImage(OBJECT)
二.代碼編程
在pages文件里面創(chuàng)建uploadimg文件夾
1.編寫(xiě)頁(yè)面結(jié)構(gòu):uploadimg.wxml
<view class="container" style="padding:1rem;"> <button type="primary"bindtap="chooseimage">獲取圖片</button> <image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx;margin:1rem 0;"/> </view>
2.設(shè)置數(shù)據(jù):uploadimg.js
//獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { tempFilePaths: '', }, /** * 上傳圖片 */ chooseimage: function () { var _this = this; wx.chooseImage({ count: 1, // 默認(rèn)9 // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sizeType: ['original', 'compressed'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有 sourceType: ['album', 'camera'], // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 success: function (res) { _this.setData({ tempFilePaths:res.tempFilePaths }) } }) } })
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
codemirror6實(shí)現(xiàn)在線代碼編輯器使用詳解
這篇文章主要為大家介紹了codemirror6實(shí)現(xiàn)在線代碼編輯器使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-01-01JavaScript自動(dòng)化測(cè)試添加頁(yè)面DOM元素唯一ID方案示例
這篇文章主要為大家介紹了JavaScript自動(dòng)化測(cè)試添加頁(yè)面DOM元素唯一ID方案示例,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09微信小程序獲取用戶openId的實(shí)現(xiàn)方法
這篇文章主要介紹了微信小程序獲取用戶openId的實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2017-05-05微信小程序 本地?cái)?shù)據(jù)存儲(chǔ)實(shí)例詳解
這篇文章主要介紹了微信小程序 本地?cái)?shù)據(jù)存儲(chǔ)實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-04-04前端必會(huì)的package.json創(chuàng)建及常見(jiàn)屬性用法示例詳解
這篇文章主要為大家介紹了前端必會(huì)的package.json創(chuàng)建及常見(jiàn)屬性用法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-08-08在JavaScript實(shí)例對(duì)象中改寫(xiě)原型方法詳情
這篇文章主要介紹了在JavaScript實(shí)例對(duì)象中改寫(xiě)原型方法的一下相關(guān)資料,需要的效果版可以參考一下文章詳細(xì)內(nèi)容,希望對(duì)你有所幫助2021-10-10