微信小程序实现多张图片的一次性上传，删除，预览，点击按钮上传至云存储

本文主要是介绍微信小程序实现多张图片的一次性上传，删除，预览，点击按钮上传至云存储，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

实现功能

1. 实现从本地文件中一次选择上传多张图片
2. 长按可删除图片
3. 单击可预览图片
4. 点击按钮上传至小程序云平台的云存储中(自行借鉴)

应用场景

租售、分享、交友等平台中图片的选择与上传

代码实例

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) { }})}}});}}*/
})

以上便是上传图片实例的所有内容啦，原创不易，如需转载请注明原文作者及出处,谢谢!

这篇关于微信小程序实现多张图片的一次性上传，删除，预览，点击按钮上传至云存储的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---