【微信小程式雲開發】1分鐘學會實現上傳、下載、預覽、刪除圖片，並且以九宮格展示圖片

小禿僧發表於2021-12-31
微信小程式

大家好，我叫小禿僧
這篇文章是講解雲開發如何上傳、下載、預覽、刪除圖片，並且以九宮格展示圖片的功能

@

目錄

1、 實現效果

廢話少說，先看效果為敬：

在這裡插入圖片描述

說明：
中間停頓一下是我在選擇照片上傳。點選右上角的“x”可以刪除圖片，點選“下載第一張圖片”按鈕可以下載並開啟第一張圖片，因為下載download()函式我傳入的是第一張圖片的雲端儲存的圖片地址。

2、JavaScript程式碼

首先，我們要在頁面的data物件裡面定義fileList、linshi兩個陣列

     /**
   * 頁面的初始資料
   */
  data: {
    fileList:[],      //存放有圖片地址的圖片陣列
    linshi:[],   //存放選擇的圖片的臨時陣列
  },

有很詳細的程式碼註釋，很好理解，非常簡單。這是上傳圖片函式的程式碼

  // 上傳圖片
  uploadToCloud() {
        let that = this;
        wx.chooseImage({
          count: 9,         //count屬性確定最多可以上傳9張，下方屬性可以看看官方的說明，就不一一說明
          sizeType: ['original', 'compressed'],
          sourceType: ['album', 'camera'],
          success (res) {
            wx.showLoading({
              title: '正在上傳',
            })    
            console.log(res)
            //賦值給linshi臨時陣列暫時儲存起來
            that.setData({
              linshi:that.data.linshi.concat(res.tempFilePaths)
            })
            console.log(that.data.linshi)
            //設定圖片儲存到雲端儲存的位置和圖片名稱
            let lujin = "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000);
            //這裡呼叫了圖片上傳函式wx.cloud.uploadFile()
            //傳給wx.cloud.uploadFile的cloudPath屬性的值不能重複！！！巨坑，加個index就可以避免重複了
            const uploadTasks = that.data.linshi.map((item, index)  =>  that.uploadFilePromise(index+lujin, item));
            //promise.all方法會等待map方法都執行完全後再繼續執行then方法裡面的程式碼 
            Promise.all(uploadTasks)
              .then(data => {
                console.log(data)
                wx.hideLoading()
                wx.showToast({ 
                  title: '上傳成功', 
                  icon: 'none' 
                });
                const newFileList = data.map(item => ({ url: item.fileID,isImage: true,}));
                console.log(newFileList)
                //每次上傳成功後，都要清空一次臨時陣列，避免第二次重複上傳，浪費儲存資源，
                that.setData({ 
                  fileList: that.data.fileList.concat(newFileList),
                  linshi:[],
                });
                
              })
              .catch(e => {
                wx.showToast({ title: '上傳失敗', icon: 'none' });
                console.log(e);
              });
        
          }
        })
    },
      //上傳到雲端儲存，並且獲得圖片地址
      uploadFilePromise(fileName, chooseResult) {
        return wx.cloud.uploadFile({
          cloudPath: fileName,
          filePath: chooseResult
        });
      },

下方是刪除函式：

    //刪除圖片
    delete:function(event){
      let that = this;
      console.log(event)
      let inde = event.currentTarget.dataset.id
      //刪除陣列裡面的值
      that.data.fileList.splice(inde,1)
      that.setData({
          fileList:that.data.fileList,
      })
    },

下方是預覽函式：

    //預覽圖片
    previewImage:function(event){
      console.log(event)
      wx.previewImage({
        urls: [event.currentTarget.dataset.url] // 需要預覽的圖片http連結列表
      })    
    },

你會發現delete函式和previewImage函式都有個接收引數event，delete函式的event是用來接收我們在wxml繫結的id，而id的值就等於圖片陣列下標index，用於區別刪除哪一張圖片

預覽也是同樣的邏輯。previewImage函式的event是用來接收我們在wxml繫結的url，而url的值就等於圖片地址url，用於區別預覽哪一張圖片，並傳值給wx.previewImage()方法進行預覽即可

點選會觸發對應的函式，我們繫結的資料就會傳給對應函式的event引數接收。非常簡單！

我們在wxml是這樣子繫結資料的，如下圖:

在這裡插入圖片描述

id和url可以自定義哈，繫結資料的固定格式是data-xxx

下方是下載函式：

  //下載圖片
    download:function(){
      let url = this.data.fileList[0].url;
      //下載檔案
      wx.cloud.downloadFile({
        fileID: url,
        success: res => { 
          console.log("檔案下載成功",res);
          //開啟檔案
          const filePath = res.tempFilePath
          wx.showModal({
            title: '提示',
            content: '下載成功，請開啟另存',
            showCancel:false,
            confirmText:'前往另存',
            success (res) {
              if (res.confirm) {
                console.log('使用者點選確定')
                wx.openDocument({
                  filePath: filePath,
                  success: function (re) {
                    console.log('檔案開啟成功',re)
                  }
                })
              } else if (res.cancel) {
                console.log('使用者點選取消')
              }
            }
          })
        }
      })
    },

使用官方給的wx.cloud.downloadFile方法進行下載，因為這個示例我下載的是圖片的第一張，所以fileID我們傳入的是圖片陣列的第一張圖片的地址。

下載成功後，我們可以使用官方的wx.openDocument方法去開啟剛剛下載的圖片。

非常簡單易懂滴！

3、wxml程式碼

<view class="des">溫馨提示：點選加號圖片可以上傳圖片哦</view>
<view class="img">
  <block wx:for="{{ fileList }}" wx:key="index">
    <view class="img2">
       <view bindtap="delete" data-id="{{index}}">x</view>
       <image bindtap="previewImage" data-url="{{item.url}}" src="{{item.url}}"></image>
    </view> 
   </block>
   <image wx:if="{{fileList.length<9}}" bindtap="uploadToCloud" style="width: 200rpx;height: 200rpx;" src="/images/jiahao.png"></image>
</view>

<button style="margin: 30rpx 0" type="primary" catchtap="download">下載第一張圖片</button>

在wxml裡分別繫結了delete()刪除函式、previewImage()預覽函式、uploadToCloud()上傳函式、download()下載函式。點選會分別觸發不同的函式，實現對應的功能

4、wxss程式碼

這個wxss是規定wxml的內容是怎麼顯示，就是寫一些樣式，比如圖片的寬高要多大等等

.img{
  margin-left: 5%;
  width: 90%;
  display: flex;
   flex-direction: row;
   flex-wrap: wrap;
}
.img2{
   width: 210rpx;
   height: 210rpx;
}
.img2 view{
  color: red;
  z-index: 5;
  position: relative; 
  width: 20rpx;
  height: 20rpx;
  margin-top:0rpx;
  margin-left: 90%;
}
.img2 image{
  width: 190rpx;
  height: 190rpx;
  position: relative;
  z-index: 5;
}
.des {
  padding-left: 40rpx;
  padding-top: 20rpx;
  font-size: 26rpx;
  color: #acacac;
  letter-spacing: 2rpx;
  line-height: 42rpx;
}

到這裡就完成了，有詳細的程式碼註釋，是不是非常簡單

需要原始碼可以點選這裡

學到的童鞋，一鍵三連為敬！感激不盡....哈哈哈，歡迎關注小禿僧！
end
專注前端開發，擅長微信小程式開發。歡迎關注微信公眾號：小禿僧

相關文章