关于微信小程序上传多张图片的问题

最新推荐文章于 2024-03-31 12:28:49 发布

逍～

最新推荐文章于 2024-03-31 12:28:49 发布

阅读量890

点赞数

文章标签：微信小程序小程序

本文链接：https://blog.csdn.net/immortals9527/article/details/127324792

版权

直接帖代码

wxml

<view style="background-color: #ffffff;padding: 30rpx;margin: 25rpx;border-radius: 40rpx;">

  <view style="display: flex;flex-direction: column;margin-left:30rpx">
    <view style="display: flex;margin-top: 40rpx;align-items: center;">
      <view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all;">社团名称</view>
      <input bindinput="shetuan_title" placeholder="" maxlength="15" style="border-bottom: 1px solid #a1a1a1;" />
    </view>

    <view style="display: flex;margin-top: 40rpx;align-items: center;">
      <view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all; ">社团负责人</view>
      <input bindinput="shetuan_fuzeren" placeholder="" maxlength="10" style="border-bottom: 1px solid #a1a1a1;" />
    </view>

    <view style="display: flex;margin-top: 40rpx;align-items: center;">
      <view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all;">负责人联系方式</view>
      <input bindinput="shetuan_lianxi" placeholder="" maxlength="20" style="border-bottom: 1px solid #a1a1a1;" />
    </view>
    <view style="display: flex;margin-top: 40rpx;align-items: center;">
      <view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all;">招新群号</view>
      <input bindinput="find_new_number" placeholder="" maxlength="20" style="border-bottom: 1px solid #a1a1a1;" />
    </view>
    <view style="display: flex;margin-top: 40rpx;align-items: center;">
      <view style="margin-right: 70rpx;color: #a8a8a8;word-break: keep-all;">社团描述</view>
      <textarea bindinput="description" auto-height="true" maxlength="100" style="border-bottom: 1px solid #a1a1a1;"></textarea>
    </view>


    <view class="imageRootAll">
      <block wx:for="{{imgList}}" wx:key="index">
        <view class="imgItem">
          <image class="img" src='{{item}}' mode='aspectFill'></image>
          <image class="closeImg" bindtap="DeleteImg" src="/images/close.png" data-index="{{index}}" />
        </view>
      </block>

      <!-- 选择图片按钮 -->
      <view wx:if="{{imgList.length<3}}" class="imgItem" bindtap="ChooseImage">
        <image class="photo" src="../../../images/photo.png"></image>
      </view>
    </view>


  </view>
</view>


<button bindtap="{{chongfu==true?'fabu':''}}" type="primary">发布</button>

前端代码不做过多解释，wx：if控制图片添加的隐藏。

Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgList: [],
    shetuan_title: '',
    shetuan_fuzeren: '',
    shetuan_lianxi: '',
    find_new_number: '',
    description: '',
    fileIDs: [],
    chongfu: true
  },

  shetuan_title(e) {
    var title = e.detail.value
    console.log(title)
    this.setData({
      shetuan_title: title
    })
  },
  shetuan_fuzeren(e) {
    var fuzeren = e.detail.value
    console.log(fuzeren)
    this.setData({
      shetuan_fuzeren: fuzeren
    })
  },
  shetuan_lianxi(e) {
    var lianxi = e.detail.value
    console.log(lianxi)
    this.setData({
      shetuan_lianxi: lianxi
    })
  },
  find_new_number(e) {
    var find_new_number = e.detail.value
    console.log(find_new_number)
    this.setData({
      find_new_number: find_new_number
    })
  },
  description(e) {
    var description = e.detail.value
    console.log(description)
    this.setData({
      description: description
    })
  },
  onLoad(options) {

  },
  //选择图片
  ChooseImage() {
    wx.chooseImage({
      count: 6 - this.data.imgList.length, //默认9,我们这里最多选择6张
      sizeType: ['compressed'], //可以指定是原图还是压缩图，这里用压缩
      sourceType: ['album', 'camera'], //从相册选择
      success: (res) => {
        console.log("选择图片成功", res)
        if (this.data.imgList.length != 0) {
          this.setData({
            imgList: this.data.imgList.concat(res.tempFilePaths)
          })
        } else {
          this.setData({
            imgList: res.tempFilePaths
          })
        }
        console.log("路径", this.data.imgList)
      }
    });
  },
  //删除图片
  DeleteImg(e) {
    wx.showModal({
      title: '要删除这张照片吗？',
      content: '',
      cancelText: '取消',
      confirmText: '确定',
      success: res => {
        if (res.confirm) {
          this.data.imgList.splice(e.currentTarget.dataset.index, 1);
          this.setData({
            imgList: this.data.imgList
          })
        }
      }
    })
  },
  fabu(e) {
    var that = this
    this.setData({
      chongfu: false
    })
    setTimeout(function () {
      that.setData({
        chongfu: true
      })
    }, 1500);
    //let user = app.globalData.userInfo
    let account = wx.getStorageSync('account')
    console.log(account)
    if (!account || !account.name) {
      wx.showToast({
        icon: 'error',
        title: '请先登陆',
      })
      setTimeout(() => {
        wx.switchTab({
          url: '/pages/demo04/demo04',
        })
      }, 1000);
      return
    }

    if (!this.data.shetuan_title || this.data.shetuan_title.length < 4) {
      wx.showToast({
        icon: "error",
        title: '名称不少于4'
      })
      return
    }
    if (!this.data.shetuan_fuzeren || this.data.shetuan_fuzeren.length < 1) {
      wx.showToast({
        icon: "error",
        title: '负责人不为空'
      })
      return
    }
    if (!this.data.shetuan_lianxi || this.data.shetuan_lianxi.length < 1) {
      wx.showToast({
        icon: "error",
        title: '联系方式不为空'
      })
      return
    }
    if (!this.data.find_new_number || this.data.find_new_number.length < 1) {
      wx.showToast({
        icon: "error",
        title: '群号不为空'
      })
      return
    }
    if (!this.data.description || this.data.description.length < 1) {
      wx.showToast({
        icon: "error",
        title: '描述不为空'
      })
      return
    }
    //图片相关
    let imgList = this.data.imgList
    if (!imgList || imgList.length < 1) {
      wx.showToast({
        icon: "error",
        title: '请选择图片'
      })
      return
    }
    // if (!this.data.type || this.data.type == '请选择') {
    //   wx.showToast({
    //     icon: "error",
    //     title: '请选择商品类型'
    //   })
    //   return
    // }
    // if (!this.data.school || this.data.school == '请选择所属学校') {
    //   wx.showToast({
    //     icon: "error",
    //     title: '请选择学校'
    //   })
    //   return
    // }
    // if (!this.data.price || parseInt(this.data.price) < 0 || parseInt(this.data.price) > 999999 || parseInt(this.data.price) / 1 !== parseInt(this.data.price)) {
    //   wx.showToast({
    //     icon: "error",
    //     title: '价格不正确'
    //   })
    //   return
    // }
    // if (!this.data.number || this.data.number < 1 || this.data.number > 999 || parseInt(this.data.number) / 1 !== parseInt(this.data.number) || this.data.number == 0) {
    //   wx.showToast({
    //     icon: "error",
    //     title: '数量不正确'
    //   })
    //   return
    // }
    // if (!wx.getStorageSync('account').lianxi) {
    //   wx.showToast({
    //     icon: "error",
    //     title: '无联系方式'
    //   })
    //   return
    // }


    wx.showLoading({
      title: '申请中...',
    })
    var date = new Date();
    var Y = date.getFullYear();
    var M = date.getMonth() + 1;
    var D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
    var H = date.getHours()
    var min = date.getMinutes()
    if (min < 10) {
      min = '0' + min
    }
    if (M < 10) {
      M = '0' + M
    }
    let shetuan_request_time = Y + "-" + M + "-" + D + " " + H + ":" + min
    const promiseArr = []
    //只能一张张上传 遍历临时的图片数组
    for (let i = 0; i < this.data.imgList.length; i++) {
      let filePath = this.data.imgList[i]
      let suffix = /\.[^\.]+$/.exec(filePath)[0]; // 正则表达式，获取文件扩展名
      //在每次上传的时候，就往promiseArr里存一个promise，只有当所有的都返回结果时，才可以继续往下执行
      promiseArr.push(new Promise((reslove, reject) => {
        wx.cloud.uploadFile({
          cloudPath: '图片/社团/社团上传图片/' + Y + '/' + M + '/' + D + '/' + new Date().getTime() + suffix,
          filePath: filePath, // 文件路径
        }).then(res => {
          // get resource ID
          console.log("上传结果", res.fileID)
          this.setData({
            fileIDs: this.data.fileIDs.concat(res.fileID)
          })
          reslove()
        }).catch(error => {
          console.log("上传失败", error)
        })
      }))
    }
    //保证所有图片都上传成功
    let db = wx.cloud.database()
    Promise.all(promiseArr).then(res => {
      db.collection('shetuan').add({
        data: {
          shetuan_title: this.data.shetuan_title,
          shetuan_fuzeren: this.data.shetuan_fuzeren,
          shetuan_lianxi: this.data.shetuan_lianxi,
          find_new_number: this.data.find_new_number,
          shetuan_request_time: shetuan_request_time,
          touxiangurl: wx.getStorageSync('account').touxiangurl,
          imageurl: this.data.fileIDs,
          fuzeren_id: wx.getStorageSync('account')._id,
          school: wx.getStorageSync('account').school,
          description: this.data.description,
          member: [],
          shetuan_request:false,
          requset_loadding:true
          //saleid: wx.getStorageSync('account')._id,
          //lianxi: wx.getStorageSync('account').lianxi,
        },
        success: res => {
          wx.hideLoading()
          wx.showToast({
            title: '发布成功',
          })
          //清空数据
          this.setData({
            imgList: [],
            fileIDs: [],
          })
          console.log('发布成功', res)
          wx.navigateBack({
            delta: 1,
          })
        },
        fail: err => {
          wx.hideLoading()
          wx.showToast({
            icon: 'error',
            title: '网络不给力....'
          })
          console.error('发布失败', err)
        }
      })
    })
  },
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

js段的最重要的地方就是异步请求的处理，把所选照片上传云存储后，获取返回值，找到上传图片路径的字段，返回。

在外部用for循环多次上传图片，再返回图片的url，最后放入一个数组。

在上传图片外部写个promise，把以上操作都包括在内，最后在promise.all中放入上传的代码，保证all之前的操作都已经完成，再进行上传操作。

wxss

.imageRootAll {
  margin: 6rpx ;
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}


.imgItem {
  margin: 6rpx;
  position: relative;
  width: 200rpx;
  height: 200rpx;
  background: gainsboro;
  margin-top: 50rpx;
}
.img {
  width: 100%;
  height: 100%;
}

.closeImg {
  position: absolute;
  right: 0px;
  width: 40rpx;
  height: 40rpx;
}

.photo {
  width: 50%;
  height: 50%;
  margin: 25%;
}