微信小程序圖片的上傳與顯示

? 在編寫小程序的項目過程中&＃xff0c;難免會有需要上傳圖片&＃xff0c;并且顯示在指定位置。愛掏網 - it200.com下面是我在編寫微信小程序圖片的上傳與顯示時遇到的一些問題與解決辦法。愛掏網 - it200.com

? 微信小程序開發文檔里有很詳細的介紹&＃xff0c;但是有很多人是不是和我一樣看文檔看不下去。愛掏網 - it200.com這里我推薦使用微信官方推出的WEUI組件庫&＃xff1a;https://weui.io/&＃xff0c;WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫&＃xff0c;由微信官方設計團隊為微信內網頁和微信小程序量身設計&＃xff0c;令用戶的使用感知更加統一。愛掏網 - it200.com下面進入代碼正題&＃xff1a;

一、wxml排版和布局

Uploader上傳組件圖片上傳{{files.length}}/250%


二、邏輯代碼

Page({data: {files: []},chooseImage: function (e) {var that &＃61; this;wx.chooseImage({sizeType: [&＃39;original&＃39;, &＃39;compressed&＃39;], // 可以指定是原圖還是壓縮圖&＃xff0c;默認二者都有sourceType: [&＃39;album&＃39;, &＃39;camera&＃39;], // 可以指定來源是相冊還是相機&＃xff0c;默認二者都有success: function (res) {// 返回選定照片的本地文件路徑列表&＃xff0c;tempFilePath可以作為img標簽的src屬性顯示圖片that.setData({files: that.data.files.concat(res.tempFilePaths)});}})},previewImage: function(e){wx.previewImage({current: e.currentTarget.id, // 當前顯示圖片的http鏈接urls: this.data.files // 需要預覽的圖片http鏈接列表})}
});

三、效果展示

四、總結心得

? 這里功能是可以實現圖片的上傳和顯示&＃xff0c;以及上傳的圖片放大預覽的效果。愛掏網 - it200.com后面如果有需要刪除已上傳的圖片&＃xff0c;我會再一一補充。愛掏網 - it200.com