(乾貨)微信小程式之上傳圖片和圖片預覽
阿新 • • 發佈:2019-01-09
這幾天一直負責做微信小程式這一塊,也可以說是邊做邊學習吧,把自己做的微信小程式的一些功能分享出來,與大家探討一下,相互學習相互進步。
先看下效果圖
只寫了一下效果樣式的話希望大家不要太在意,下面馬路殺手要開車了。
1.wxml排版和佈局
這個排版非常簡單就是一個按鈕button加個圖片image標籤而已,這個相信有點基礎的人都能理解,直接放程式碼:
<view class="container"> <view class="userinfo"> <button bindtap="upload"> 上傳圖片 </button> </view> <block wx:for="{{tempFilePaths}}" wx:key="{{index}}"> <image src="{{item }}" bindtap="listenerButtonPreviewImage" data-index="{{index}}" style="width: 100%;"/> </block> </view>
2.重要的js
首先定義一個點選按鈕上傳圖片的一個事件,這裡會用到微信圖片API中的wx.chooseImage
這個API會有6個引數分別是:
引數 | 型別 | 必填 | 說明 |
---|---|---|---|
count | Number | 否 | 最多可以選擇的圖片張數,預設9 |
sizeType | StringArray | 否 | original 原圖,compressed 壓縮圖,預設二者都有 |
sourceType | StringArray | 否 | album 從相簿選圖,camera 使用相機,預設二者都有 |
success | Function | 是 | 成功則返回圖片的本地檔案路徑列表 tempFilePaths |
fail | Function | 否 | 介面呼叫失敗的回撥函式 |
complete | Function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |
好了該介紹的都介紹了,下面來看下程式碼:
upload: function () { let that = this; wx.chooseImage({ count:9, // 預設9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有 success: res => { wx.showToast({ title: '正在上傳...', icon: 'loading', mask: true, duration: 1000 }) // 返回選定照片的本地檔案路徑列表,tempFilePath可以作為img標籤的src屬性顯示圖片 let tempFilePaths = res.tempFilePaths; that.setData({ tempFilePaths: tempFilePaths }) } }) },
不要覺得這樣就萬事大吉了,現在僅僅是在前端顯示,你還要上傳到伺服器,上傳的話就會用到另一個API了wx.uploadFile
這個API會有8個引數
引數 | 型別 | 必填 | 說明 |
---|---|---|---|
url | String | 是 | 開發者伺服器 url |
filePath | String | 是 | 要上傳檔案資源的路徑 |
name | String | 是 | 檔案對應的 key , 開發者在伺服器端通過這個 key 可以獲取到檔案二進位制內容 |
header | Object | 否 | HTTP 請求 Header, header 中不能設定 Referer |
formData | Object | 否 | HTTP 請求中其他額外的 form data |
success | Function | 否 | 介面呼叫成功的回撥函式 |
fail | Function | 否 | 介面呼叫失敗的回撥函式 |
complete | Function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |
下面來看下程式碼是什麼樣的:
upload: function () { let that = this; wx.chooseImage({ count: 9, // 預設9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有 sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有 success: res => { wx.showToast({ title: '正在上傳...', icon: 'loading', mask: true, duration: 1000 }) // 返回選定照片的本地檔案路徑列表,tempFilePath可以作為img標籤的src屬性顯示圖片 let tempFilePaths = res.tempFilePaths; that.setData({ tempFilePaths: tempFilePaths }) /** * 上傳完成後把檔案上傳到伺服器 */ var count = 0; for (var i = 0, h = tempFilePaths.length; i < h; i++) { //上傳檔案 /* wx.uploadFile({ url: HOST + '地址路徑', filePath: tempFilePaths[i], name: 'uploadfile_ant', header: { "Content-Type": "multipart/form-data" }, success: function (res) { count++; //如果是最後一張,則隱藏等待中 if (count == tempFilePaths.length) { wx.hideToast(); } }, fail: function (res) { wx.hideToast(); wx.showModal({ title: '錯誤提示', content: '上傳圖片失敗', showCancel: false, success: function (res) { } }) } });*/ } } }) },
有的人會有疑問為什麼會定義一個count為0呢,就是因為需要判斷是不是最後一張圖片如果是就不需要顯示載入中了。
好了,上傳圖片基本上說完了接著看預覽圖片,預覽圖片的話也要用到一個微信的API是wx.previewImage
這個API有五個引數
current | String | 否 | 當前顯示圖片的連結,不填則預設為 urls 的第一張 |
urls | StringArray | 是 | 需要預覽的圖片連結列表 |
success | Function | 否 | 介面呼叫成功的回撥函式 |
fail | Function | 否 | 介面呼叫失敗的回撥函式 |
complete | Function | 否 | 介面呼叫結束的回撥函式(呼叫成功、失敗都會執行) |
定義預覽圖片方法,點選圖片的時候執行:
listenerButtonPreviewImage: function (e) { let index = e.target.dataset.index;//預覽圖片的編號 let that = this; wx.previewImage({ current: that.data.tempFilePaths[index],//預覽圖片連結 urls: that.data.tempFilePaths,//圖片預覽list列表 success: function (res) { //console.log(res); }, fail: function () { //console.log('fail') } }) },
大家有問題的話可以提出來,我們一起解決,一起進步,希望本文章對大家有幫助,謝謝