多组图片.png
axml
<!--申请材料-->
<view class="content">
<view class="title">
<text class="blue"></text>
申请材料
</view>
<block a:for="{{applyData}}" a:key="*this" a:for-index="applyIndex">
<view class="photoLine">
<view class="photoTitle">
<text class="requireText">*</text>{{item}}
</view>
<view class="showPhoto">
<view a:for="{{tempFilePaths[applyIndex]}}" class="photoImg" data-showIndex="{{index}}" data-applyIndex="{{applyIndex}}" onLongTap='onLongTapTest'>
<image mode="widthFix" src="{{item}}" onTap="previewImage" data-showIndex="{{index}}" data-applyIndex="{{applyIndex}}" />
</view>
<block a:if="{{tempFilePaths[applyIndex].length<3}}">
<view class="upload" onTap="chooseImage" data-applyIndex="{{applyIndex}}">
<am-icon type="add" size="30" color="#CFCCCF"/>
</view>
</block>
</view>
</view>
</block>
</view>
acss
.content{
/* width: 100%; */
box-sizing: border-box;
margin-bottom: 30rpx;
padding: 31rpx 24rpx;
border-radius: 7rpx;
font-size: 25rpx;
color: #333;
line-height: 36rpx;
background: #fff;
}
.title{
display: flex;
align-items: center;
font-size:29rpx;
font-family:PingFangSC-Semibold,PingFang SC;
font-weight:600;
color:rgba(51,51,51,1);
height:40rpx;
padding: 0 7rpx;
margin-bottom: 22rpx;
}
.blue{
height: 26rpx;
border: 2rpx solid #018EFE;
border-radius:3rpx;
margin-right: 20rpx;
background: #018EFE;
}
.requireText{
color: #d33131;
}
.photoLine{
width: 100%;
padding:30rpx 20rpx;
box-sizing: border-box;
background: #fff;
border-bottom: 2rpx solid #F7F7F7;
}
.photoLine:nth-last-child(1){
border: none;
}
.photoTitle{
color: rgba(115, 115, 115, 1);
font-size: 32rpx;
margin-bottom: 30rpx;
}
.showPhoto{
display: flex;
flex-wrap: wrap;
}
.photoImg{
margin-right: 30rpx;
}
.photoImg image{
width: 164rpx;
height: 164rpx;
}
.upload{
display: flex;
justify-content: center;
align-items: center;
width:112rpx;
height:112rpx;
border-radius:7rpx;
border:2rpx solid rgba(204,204,204,1);
}
js
var app = getApp();
Page({
data: {
//存储网络路径
tempFilePaths: [],
//存储未加前缀的路径
tempImg: [],
len: [],
applyData: ['第一组图片', '第二组图片', '第三组图片',],
},
onLoad() {
//目的：让img_url和temFilePaths是数组里放数组
for (let j = 0; j < this.data.applyData.length; j++) {
this.data.tempFilePaths[j] = [];
this.data.len[j] = 0;
this.data.tempImg[j] = [];
}
this.setData({
tempFilePaths: this.data.tempFilePaths,
tempImg: this.data.tempImg,
})
},
chooseImage(e) {
let that = this;
let applyIndex = e.target.dataset.applyIndex;
console.log("applyIndex=" + applyIndex);
that.setData({
applyIndex
})
if (that.data.tempFilePaths[applyIndex] != null) {
that.data.len[applyIndex] = that.data.tempFilePaths[applyIndex].length;
}
my.chooseImage({
sourceType: ['camera', 'album'],
count: 3 - that.data.len[applyIndex],
success: (res) => {
//把每次选择的图push进数组
//存储网络路径
let imageNetPath = that.data.tempFilePaths;
//存储路径
let localImg = that.data.tempImg;
//多张图片临时变量
let imgUrl = imageNetPath[applyIndex];
let unprefix = localImg[applyIndex];
for (let i = 0; i < res.apFilePaths.length; i++) {
my.uploadFile({
url: app.globalData.host + "/api/common/upload_image",
header: {
'content-type': 'application/json',
},
fileType: 'image',
fileName: 'img',
filePath: res.apFilePaths[i],
success: res => {
let arr = JSON.parse(res.data);
console.log(arr);
if (arr.status == 0) {
unprefix.push(arr.data.img_path);
imgUrl.push(app.globalData.host + "/" + arr.data.img_path);
imageNetPath[applyIndex] = imgUrl;
localImg[applyIndex] = unprefix;
that.setData({
tempImg: localImg,
tempFilePaths: imageNetPath
})
console.log("=====tempImg====");
console.log(this.data.tempImg);
console.log("=====tempFilePaths====");
console.log(this.data.tempFilePaths);
console.log(this.data.tempFilePaths[applyIndex]);
}
if(arr.status==1){
my.showToast({
type: 'none',
content:"上传失败："+ arr.message,
duration: 1500
});
}
},
fail: function (res) {
my.alert({ title: '上传失败' });
},
});
}
},
fail: (res) => {
console.log(res)
}
})
},
//预览图片
previewImage(e) {
const applyIndex = e.target.dataset.applyIndex;
const showIndex = e.target.dataset.showIndex;
let applyArr = this.data.tempFilePaths[applyIndex];
console.log("==applyIndex==" + applyIndex);
console.log("==showIndex==" + showIndex);
my.previewImage({
current: showIndex,
urls: applyArr
});
},
//长按删除图片
onLongTapTest(e) {
var that = this;
let index = e.target.dataset.showIndex;//图片下标
let applyIndex = e.target.dataset.applyIndex;//门诊病历，住院病历索引
var tempFilePaths = that.data.tempFilePaths;
var tempImg = that.data.tempImg;
my.confirm({
title: '温馨提示',
content: '确定要删除此图片吗',
confirmButtonText: '确定',
cancelButtonText: '取消',
success: (res) => {
if (res.confirm) {
my.request({
url: app.globalData.host + '/api/common/delete_image',
method: 'POST',
data: {
img_path:tempImg[applyIndex][index]
},
headers:{'content-type': 'application/json'},
dataType: 'json',
success: (res) => {
if (res.data.status == 0) {
tempFilePaths[applyIndex].splice(index, 1);
tempImg[applyIndex].splice(index, 1);
that.setData({
tempFilePaths,
tempImg
});
my.showToast({
type: 'none',
content: res.data.message,
duration: 1500
});
}
},
});
} else if (res.cancel) {
console.log('点击取消了');
return false;
}
}
})
},
上传成功.png
网友评论