一：實現(xiàn)功能
實現(xiàn)從本地文件中一次選擇上傳多張圖片
長按可刪除圖片
單擊可預覽圖片
點擊按鈕上傳至小程序云平臺的云存儲中(自行借鑒)
二：應用場景
租售、分享、交友等平臺中圖片的選擇與上傳
三：代碼實例
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">
? ? ? <!--這里自行創(chuàng)建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) { }
? ? ? ? ? ? })
? ? ? ? ? }
? ? ? ? }
? ? ? });
? ? }
? }
? */
})
案例截圖：
