【微信小程序雲開發】1分鐘學會實現上傳、下載、預覽、刪除圖片，並且以九宮格展示圖片
大家好，我叫小禿僧
這篇文章是講解雲開發如何上傳、下載、預覽、刪除圖片，並且以九宮格展示圖片的功能
@
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
專註前端開發，擅長微信小程序開發。歡迎關注微信公眾號：小禿僧
