上传单组图片

单组图片.png

axml

<!--申请材料-->
  <view class="content">
    <view class="title">
      <text class="blue"></text>
      申请材料
    </view>
    <view class="img-box">
      <view a:for="{{tempFilePaths}}" a:key="index">
        <image src="{{item}}" onLongTap="deleteImage" onTap="previewImage"  data-index="{{index}}" mode='widthFix' style="width:145rpx;margin-right:20rpx;"/>
      </view>
      <view class="upload" onTap="uploadFile" a:if="{{tempFilePaths.length<3}}">
        <am-icon type="add" size="30" color="#CFCCCF"/>
      </view>
    </view>
  </view>

acss

.content{
  /* width: 100%; */
  box-sizing: border-box;
  margin-bottom: 30rpx;
  /* margin: 0 29rpx 24rpx; */
  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;
}
.img-box{
  display: flex;
  padding:27rpx 18rpx;
}
.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: [],
    len: [],
    //存储未加前缀的路径
    tempImg: [],
  },  
  uploadFile() {
    let that = this;
    if (that.data.tempFilePaths != null) {
      that.data.len = that.data.tempFilePaths.length;
    }
    my.chooseImage({
      count: 3 - that.data.len,
      chooseImage: 3,
      success: res => {
        console.log("=======选择图片====");
        let imgUrl = that.data.tempFilePaths;
        let unprefix = that.data.tempImg;
        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 => {
              // console.log("===执行几次==")
              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);
                console.log("==========unprefix=========");
                console.log(unprefix);
                that.setData({
                  tempImg: unprefix,
                  tempFilePaths: imgUrl
                })
                console.log("=======tempFilePaths======");
                console.log(this.data.tempFilePaths);
              }
              // if (arr.status == 1) {
              //   my.showToast({
              //     type: 'none',
              //     content: arr.message,
              //     duration: 1500
              //   });
              // }
            },
            fail: function (res) {
              my.alert({ title: '上传失败' });
            },
          });
        }
      },
    });
  },

  //预览图片
  previewImage(e) {
    let index = e.target.dataset.index;
    let that = this;
    my.previewImage({
      current: index,
      urls: that.data.tempFilePaths,
    })
  },

  //长按删除图片
  deleteImage(e) {
    var that = this;
    var tempFilePaths = that.data.tempFilePaths;
    var tempImg = that.data.tempImg;
    var index = e.target.dataset.index; //获取当前长按图片下标
    console.log("==index==" + index);
    my.confirm({
      title: '温馨提示',
      content: '确定要删除此图片吗',
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      success: (res) => {
        if (res.confirm) {
          my.request({
            url: app.globalData.host + "/api/common/delete_image",
            data: {
              img_path: tempImg[index]
            },
            header: {
              'content-type': 'application/json',
            },
            success: (res) => {
              console.log(res)
              if (res.data.status == 0) {
                console.log('点击确定了');
                tempFilePaths.splice(index, 1);
                tempImg.splice(index, 1);
                console.log(this.data.tempImg)
                that.setData({
                  tempFilePaths,
                  tempImg
                });
                // my.showToast({
                //   type: 'none',
                //   content: res.data.message,
                //   duration: 1500
                // })
              }
              // if (res.data.status == 1) {
              //   my.showToast({
              //     type: 'none',
              //     content: res.data.message,
              //     duration: 1500
              //   })
              // }
            }
          });
        } else if (res.cancel) {
          console.log('点击取消了');
          return false;
        }
        console.log("====================================");
        console.log(this.data.tempFilePaths);
      }
    })
  },
})

上传成功.jpg