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

學習目錄

• 1、 實現效果
• 2、JavaScript代碼
• 3、wxml代碼
• 4、wxss代碼

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.tempFilePathwx.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

總結

以上是生活随笔為你收集整理的【微信小程序云开发】1分钟学会实现上传、下载、预览、删除图片，并且以九宫格展示图片的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。