咫尺資訊站一一為您提供時下熱門前沿動態

查看更多
首頁> 微信小程序資訊> 微信小程序之上傳圖片和圖片預覽【干貨】

微信小程序之上傳圖片和圖片預覽【干貨】

閱讀:744微信小程序

這幾天一直負責做微信小程序這一塊,也可以說是邊做邊學習吧,把自己做的微信小程序的一些功能分享出來,與大家探討一下微信小程序之上傳圖片和圖片預覽,相互學習相互進步。先看下效果圖

只寫了一下效果樣式的話希望大家不要太在意,下面馬路殺手要開車了。

1.wxml排版和布局

這個排版非常簡單就是一個按鈕button加個圖片image標簽而已,這個相信有點基礎的人都能理解,直接放代碼:

       
首先定義一個點擊按鈕上傳圖片的一個事件,這里會用到微信圖片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')  }    })  },
這個時候才算是大工告成

【溫馨提示】即速應用倡導尊重與保護知識產權。如發現本站文章存在版權問題,煩請提供版權疑問、身份證明、版權證明、聯系方式等發郵件至[email protected] ,我們將及時處理。本站文章僅作分享交流用途,作者觀點不等同于即速應用觀點。用戶與作者的任何交易與本站無關,請知悉。

  • 頭條
  • 搜狐
  • 微博
  • 百家
  • 一點資訊
  • 知乎
pk10冠亚11算小1.9平台 晓游棋牌电脑版下载 广西11选5开奖结果查询 锦鲤俱乐部分享赚钱吗 吉祥彩彩票游戏 中国体彩福建31选7 最近体彩p3试机号 广西十一选五和值基本走势图 奥比岛哪里赚钱快 贵州11选5大奖 浙江11选五开奖结果图 现在最好的手机棋牌软件 什么比趣头条赚钱多 吉林十一选五提前预测 微信里看不到买彩票 河南22选5走势图非凡彩票 nba本土投注量cc指数