微信小程序实现多张图片的一次性上传，删除，预览，点击按钮上传至云
一：实现功能
实现从本地文件中一次选择上传多张图片
长按可删除图片
单击可预览图片
点击按钮上传至小程序云平台的云存储中(自行借鉴)
二：应用场景
租售、分享、交友等平台中图片的选择与上传
三：代码实例
1.效果图
2.wxml文件
<text class="word-class">上传图片实例：</text>
<!--以下为图片选择-->
<view class="img_box">
<view class="imgs" wx:for="{{tempFilePaths}}" wx:key="index">
<image src='{{item}}' bindlongpress="DeleteImg" bindtap="PreviewImg" data-index="{{index}}" mode='widthFix' />
</view>
<view class="imgs">
<view class="images" bindtap="ChooseImg">
<!--这里自行创建image文件夹，并添加choose.png，及中部加号-->
<image src='./image/choose.png' mode='widthFix' />
</view>
</view>
</view>
<!--以下为上传按钮，可自行借鉴-->
<view class="UploadBtnarea">
<button class="UploadBtnclass" bindtap="UploadBtntap">上传图片</button>
</view>
3.wxss文件
/* 提示 */
.word-class{
font-size: 14px;
color: rgb(95, 87, 87);
margin-left: 10px;
}
/* 选择图片 */
.img_box{
width:690rpx;
position:relative;
display: flex;
flex-wrap: wrap;
margin:0 auto;
padding-top: 20px;
}
.imgs{
width:33.33333333%;
display: flex;
justify-content: center;
margin-bottom:20rpx;
}
.imgs image{
width:90%;
max-height:212rpx;
border:1px solid rgba(214, 212, 212, 0.1);
}
.imgs .images{
position:relative;
}
.images button{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
}
.img_box .images{
width:90%;
height: 212rpx;
border:1px solid #E8E8E8;
border-radius:4rpx;
display: flex;
align-items: center;
justify-content: center;
}
.img_box .images>image{
width:60rpx;
height:60rpx;
}
/* 上传按钮 */
.UploadBtnarea{
width: 100%;
height: 32px;
margin-top: 30px;
margin-bottom: 10px;
}
.UploadBtnclass{
height: 100%;
width: 90%;
background-color: rgb(5, 173, 5);
color: white;
align-self: center;
font-size: 13px;
}
4.js文件
Page({
data: {
tempFilePaths: [],
//以下为上传图片至云存储
//images_fileID: [],
},
//选择图片
ChooseImg: 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 tempFilePath = res.tempFilePaths;
that.setData({
tempFilePaths: tempFilePath
})
}
})
},
//预览图片
PreviewImg: function (e) {
let index = e.target.dataset.index;
let that = this;
//console.log(that.data.tempFilePaths[index]);
//console.log(that.data.tempFilePaths);
wx.previewImage({
current: that.data.tempFilePaths[index],
urls: that.data.tempFilePaths,
})
},
//长按删除图片
DeleteImg: function (e) {
var that = this;
var tempFilePaths = that.data.tempFilePaths;
var index = e.currentTarget.dataset.index;//获取当前长按图片下标
wx.showModal({
title: '提示',
content: '确定要删除此图片吗？',
success: function (res) {
if (res.confirm) {
//console.log('点击确定了');
tempFilePaths.splice(index, 1);
} else if (res.cancel) {
//console.log('点击取消了');
return false;
}
that.setData({
tempFilePaths
});
}
})
},
// 上传图片至云数据库,可自行参考
/*
UploadBtntap: function (e) {
var count = 0;
var h = this.data.tempFilePaths.length;
if (h != 0) {
this.setData({
images_fileID: []
})
}
for (var i = 0; i < h; i++) {
//上传文件
var imageUrl = this.data.tempFilePaths[i].split("/");
var name = imageUrl[imageUrl.length - 1];
var images_fileID = this.data.images_fileID;
wx.cloud.uploadFile({
cloudPath: name, //自定义云存储路径
filePath: this.data.tempFilePaths[i],
success: res => {
images_fileID.push(res.fileID);
this.setData({
images_fileID: images_fileID //更新data中的 fileID
})
fail: res => {
count++;
wx.hideToast();
wx.showModal({
title: '错误提示',
content: '上传图片失败',
showCancel: false,
success: function (res) { }
})
}
}
});
}
}
*/
})
案例截图：
