上传多组图片

多组图片.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