<view class="allImgBox">
<view class="imgBox" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
<image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg" bindlongtap=‘previewLongImg‘></image>
<view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"><text class=‘fa fa-trash‘></text></view>
</view>
<view class="upLoadImgBox" bindtap="upLoadEvaImg">
<text class=‘fa fa-camera‘></text>
</view>
</view>
页面view代码
.allImgBox{display: flex;flex-wrap: wrap;}
.upLoadImgBox,.imgBox{width: 140rpx;height: 140rpx;border-radius: 8rpx;border: solid 1px #E5E5E5;margin: 15rpx;position: relative;}
.upLoadImgBox{background-color: #E5E5E5;display: flex;align-items: center;justify-content: center;}
.upLoadImgBox text{font-size: 60rpx;color: #999;}
.imgBox image{width: 100%;height: 100%;background-size: 100% 100%;}
.color999{color: #999;}
.f14{font-size: 28rpx;}
.bT{border-top: solid 1px #E5E5E5;}
.pT20{padding-top: 20rpx;}
.delete-btn{position: absolute;left: 0;bottom: 0px;font-size:24rpx;color: #ccc;text-align: center; background-color: rgba(0, 0, 0, 0.5);width: 100%;}
上传图片、删除图片CSS
let app = getApp();
let wxCommon = require(‘../../../utils/common.js‘);
const url = ‘上传到七牛接口‘;
Page({
/**
* 页面的初始数据
*/
data: {
imgs: [],//本地的图片数组
imgUrlArr: [],//需要传给后台的图片数组
countNum :4 //上传数量
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
// 上传图片
upLoadEvaImg: function (e) {
var that = this;
var imgs = this.data.imgs;
if (imgs.length >= 4) {
this.setData({
lenMore: 1
});
setTimeout(function () {
that.setData({
lenMore: 0
});
}, 2500);
wx.showToast({
icon:‘none‘,
title: ‘最多只能选择4张图片‘,
})
return false;
}
wx.chooseImage({
count: that.data.countNum, // 默认9
sizeType: [‘original‘, ‘compressed‘], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [‘album‘, ‘camera‘], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
var imgs = that.data.imgs;
var imgUrlArr = that.data.imgUrlArr;
// console.log(tempFilePaths + ‘----‘);
for (var i = 0; i < tempFilePaths.length; i++) {
if (imgs.length >= 9) {
that.setData({
imgs: imgs,
imgUrlArr: imgUrlArr
});
return false;
} else {
imgs.push(tempFilePaths[i]);
var item = tempFilePaths[i];
wx.uploadFile({
url: ‘接口域名’ + url,
filePath: item,
name: ‘file‘,
success: function (res) {
let picPath = JSON.parse(res.data);
picPath = picPath.data;
imgUrlArr.push(picPath);
that.setData({
imgUrlArr: imgUrlArr
})
},
fail: function (res) {
wx.showToast({
icon: ‘none‘,
title: ‘上传失败，请稍后重试!‘,
})
}
})
}
}
// console.log(imgs);
that.setData({
imgs: imgs,
imgUrlArr: imgUrlArr,
countNum: 4 - imgs.length
});
}
});
},
// 删除图片
deleteImg: function (e) {
var imgs = this.data.imgs;
var imgUrlArr = this.data.imgUrlArr;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
imgUrlArr.splice(index, 1)
var imgsLen = imgs.length;
this.setData({
imgs: imgs,
imgUrlArr: imgUrlArr,
countNum: 4 - imgsLen
});
},
// 预览图片
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.imgs;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
}
})
js代码
看一下实现方法和步骤就好，直接粘贴js是实现不了的！！！
原文地址：https://www.cnblogs.com/aishangliming/p/9158848.html
时间： 2024-11-06 11:47:28