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

學(xué)習(xí)目錄

• 1、 實(shí)現(xiàn)效果
• 2、JavaScript代碼
• 3、wxml代碼
• 4、wxss代碼

1、 實(shí)現(xiàn)效果

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

說明：
中間停頓一下是我在選擇照片上傳。點(diǎn)擊右上角的“x”可以刪除圖片，點(diǎn)擊“下載第一張圖片”按鈕可以下載并打開第一張圖片，因?yàn)橄螺ddownload()函數(shù)我傳入的是第一張圖片的云存儲(chǔ)的圖片地址。

2、JavaScript代碼

首先，我們要在頁面的data對(duì)象里面定義fileList、linshi兩個(gè)數(shù)組

/*** 頁面的初始數(shù)據(jù)*/data: {fileList:[], //存放有圖片地址的圖片數(shù)組linshi:[], //存放選擇的圖片的臨時(shí)數(shù)組},

有很詳細(xì)的代碼注釋，很好理解，非常簡(jiǎn)單。這是上傳圖片函數(shù)的代碼

// 上傳圖片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臨時(shí)數(shù)組暫時(shí)存儲(chǔ)起來that.setData({linshi:that.data.linshi.concat(res.tempFilePaths)})console.log(that.data.linshi)//設(shè)置圖片存儲(chǔ)到云存儲(chǔ)的位置和圖片名稱let lujin = "img/" + new Date().getTime() +"-"+ Math.floor(Math.random() * 1000);//這里調(diào)用了圖片上傳函數(shù)wx.cloud.uploadFile()//傳給wx.cloud.uploadFile的cloudPath屬性的值不能重復(fù)！！！巨坑，加個(gè)index就可以避免重復(fù)了const uploadTasks = that.data.linshi.map((item, index) => that.uploadFilePromise(index+lujin, item));//promise.all方法會(huì)等待map方法都執(zhí)行完全后再繼續(xù)執(zhí)行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)//每次上傳成功后，都要清空一次臨時(shí)數(shù)組，避免第二次重復(fù)上傳，浪費(fèi)存儲(chǔ)資源，that.setData({ fileList: that.data.fileList.concat(newFileList),linshi:[],});}).catch(e => {wx.showToast({ title: '上傳失敗', icon: 'none' });console.log(e);});}})},//上傳到云存儲(chǔ)，并且獲得圖片地址uploadFilePromise(fileName, chooseResult) {return wx.cloud.uploadFile({cloudPath: fileName,filePath: chooseResult});},

下方是刪除函數(shù)：

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

下方是預(yù)覽函數(shù)：

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

你會(huì)發(fā)現(xiàn)delete函數(shù)和previewImage函數(shù)都有個(gè)接收參數(shù)event，delete函數(shù)的event是用來接收我們?cè)趙xml綁定的id，而id的值就等于圖片數(shù)組下標(biāo)index，用于區(qū)別刪除哪一張圖片

預(yù)覽也是同樣的邏輯。previewImage函數(shù)的event是用來接收我們?cè)趙xml綁定的url，而url的值就等于圖片地址url，用于區(qū)別預(yù)覽哪一張圖片，并傳值給wx.previewImage()方法進(jìn)行預(yù)覽即可

點(diǎn)擊會(huì)觸發(fā)對(duì)應(yīng)的函數(shù)，我們綁定的數(shù)據(jù)就會(huì)傳給對(duì)應(yīng)函數(shù)的event參數(shù)接收。非常簡(jiǎn)單！

我們?cè)趙xml是這樣子綁定數(shù)據(jù)的，如下圖:

id和url可以自定義哈，綁定數(shù)據(jù)的固定格式是data-xxx

下方是下載函數(shù)：

//下載圖片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: '下載成功，請(qǐng)打開另存',showCancel:false,confirmText:'前往另存',success (res) {if (res.confirm) {console.log('用戶點(diǎn)擊確定')wx.openDocument({filePath: filePath,success: function (re) {console.log('文件打開成功',re)}})} else if (res.cancel) {console.log('用戶點(diǎn)擊取消')}}})}})},

使用官方給的wx.cloud.downloadFile方法進(jìn)行下載，因?yàn)檫@個(gè)示例我下載的是圖片的第一張，所以fileID我們傳入的是圖片數(shù)組的第一張圖片的地址。

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

非常簡(jiǎn)單易懂滴！

3、wxml代碼

<view class="des">溫馨提示：點(diǎn)擊加號(hào)圖片可以上傳圖片哦</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()刪除函數(shù)、previewImage()預(yù)覽函數(shù)、uploadToCloud()上傳函數(shù)、download()下載函數(shù)。點(diǎn)擊會(huì)分別觸發(fā)不同的函數(shù)，實(shí)現(xiàn)對(duì)應(yīng)的功能

4、wxss代碼

這個(gè)wxss是規(guī)定wxml的內(nèi)容是怎么顯示，就是寫一些樣式，比如圖片的寬高要多大等等

.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; }

到這里就完成了，有詳細(xì)的代碼注釋，是不是非常簡(jiǎn)單

需要源碼可以點(diǎn)擊這里

學(xué)到的童鞋，一鍵三連為敬！感激不盡…哈哈哈，歡迎關(guān)注小禿僧！
end

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。