小程序上传/编辑图片

// pages/main/shopping/shopping.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    newAddLbt:[],       // 编辑时新增轮播图列表
    newAddXqt:[],       // 编辑时新增详情图列表
    lbbd: true,         // 编辑时轮播图点击选择图片标的
    xqbd: true,         // 编辑时详情图点击选择图片标的
    imageList: [],      // 轮播图列表 
    xqList: [],         // 详情图列表
    shopTitle: '',      // 商品标题
    shopIntroduce: '',  // 商品介绍
    shopPrice: '',      // 商品价格
    integral: '',       // 积分
    shopStock: '',      // 库存
    postage: '',        // 邮费
    imgOneSwitch: true,
    imgTwoSwitch: true,
    imgOne: [],         // 发布商品轮播图片
    imgTwo: [],         // 发布商品详情图片
    exitLbtList: [],    // 修改上传图片的临时链接列表 轮播图
    exitxqList: [],     // 修改上传图片的临时链接列表 详情图
    MAXCOUNTIMAGE: 6,
    detailsData: {},    // 详情页数据
    _id: ''             // 被编辑商品的id
  },
  getShopTitle(e){
    this.data.shopTitle = e.detail
  },
  getShopIntroduce(e){
    this.data.shopIntroduce = e.detail
  },
  getShopStock(e){
    this.data.shopStock = e.detail
  },
  getShopPostage(e){
    this.data.postage = e.detail
  },
  getShopPrice(e){
    this.data.shopPrice = e.detail
  },
  getIntegral(e){
    this.data.integral = e.detail
  },
  // 轮播图选择图片 + 回显 
  onChooseOne: function () {
    let that = this
    wx.chooseImage({
      count: this.data.MAXCOUNTIMAGE - this.data.imgOne.length,
      sourceType: ['album', 'camera'],
      sizeType: ['compressed'],
      success(res) {
        if(that.data._id){
          // 修改
          let tempArr = that.data.exitLbtList.concat(res.tempFilePaths)
          let newArr =  that.data.imgOne.concat(res.tempFilePaths)
          that.setData({
            'exitLbtList': tempArr,
            'imgOne': newArr
          })
          console.log(that.data.exitLbtList);
        } else {
          // 添加
          let tempArr = that.data.imgOne.concat(res.tempFilePaths)
          // 将零时链接保存在imgOne
          that.setData({
            'imgOne': tempArr
          })
        }
        // 将轮播图保存到云存储
        that.onSave()
        if (that.data.imgOne.length >= that.data.MAXCOUNTIMAGE) {
          that.setData({
            imgOneSwitch: false
          })
        }
      }
    })
  },
  // 轮播图保存到 存储 & 数据库的提示
  onSave: function () {
    if (this.data.imgOne.length == 0) {
      wx.showToast({
        title: '请添加图片',
        icon: 'none'
      })
      return
    }
    console.log('通过 ---空--- 校验')
    this.OnUpImg() // 上传到云存储
  },
  // 将轮播图上传到云存储
  OnUpImg: function () {
    let promiseArr = []
    let fileIds = []     // 将图片的fileId存放到一个数组中
    if(this.data._id) {
      // 修改
      var imgLength = this.data.exitLbtList.length;
    } else {
      // 添加
      var imgLength = this.data.imgOne.length;
    }
    // 图片上传
    for (let i = 0; i < imgLength; i++) {
      let p = new Promise((resolve, reject) => {
        if(this.data._id) {
          // 修改
          var item = this.data.exitLbtList[i]
        } else {
          // 添加
          var item = this.data.imgOne[i]
        }
        let suffix = /\.\w+$/.exec(item)[0]     
        wx.cloud.uploadFile({    
          cloudPath: 'carouselMap/' + Date.now() + '-' + Math.random() * 1000000 + suffix, 
          filePath: item,
          success: (res) => {
            fileIds = fileIds.concat(res.fileID)       // 拼接   
            if(this.data._id) {
              // 修改
              var onePic = this.data.imgOne // 编辑-原本已经上传到云存储的图片列表
              fileIds.push(...onePic)
              let newArr = []
              fileIds.forEach(item => {
                if(!item.startsWith("http")){
                  newArr.push(item)
                }
              })
              // 去重
              newArr = [...new Set(newArr)]
              // imageList 传云数据库的图片url集合
              this.setData({
                imageList: newArr,
                newAddLbt: newArr,
                lbbd: false
              })
              console.log(this.data.imageList);
            } else {
              // 添加
              this.setData({
                imageList: fileIds
              })
            }
            console.log(this.data.imageList); // 2次
            resolve()
          },
          fail: (err) => {
            console.error(err)
            reject()
          }
        })
      })
      promiseArr.push(p)
    }
    Promise.all(promiseArr)
      .then((res) => {
        console.log('轮播图上传到云存储成功');
      })
      .catch((err) => {
        console.error(err)       // 上传图片失败
        wx.showToast({
          title: '上传失败 请再次点击发布',
          icon: 'none',
          duration: 3000
        })
      })
  },
  // 详情图选择图片 + 回显 
  onChooseTwo: function () {
    let that = this
    wx.chooseImage({
      count: this.data.MAXCOUNTIMAGE - this.data.imgTwo.length,
      sourceType: ['album', 'camera'],
      sizeType: ['compressed'],
      success(res) {
        if(that.data._id){
          // 修改
          let tempArr = that.data.exitxqList.concat(res.tempFilePaths)
          let newArrTwo =  that.data.imgTwo.concat(res.tempFilePaths)
          that.setData({
            'exitxqList': tempArr,
            'imgTwo': newArrTwo
          })
          console.log(that.data.exitxqList);
        } else {
          // 添加
          let tempArr = that.data.imgTwo.concat(res.tempFilePaths)
          // 将临时链接保存在imgTwo
          that.setData({
            'imgTwo': tempArr
          })
        }
        // 将详情图保存到云存储
        that.onSaveTwo()
        if (that.data.imgTwo.length >= that.data.MAXCOUNTIMAGE) {
          that.setData({
            imgTwoSwitch: false
          })
        }
      }
    })
  },
  // 将详情图保存到 存储 & 数据库的提示
  onSaveTwo: function () {
    if (this.data.imgTwo.length == 0) {
      wx.showToast({
        title: '请添加图片',
        icon: 'none'
      })
      return
    }
    this.OnUpImgTwo()
  },
  // 将详情图上传到云存储
  OnUpImgTwo: function () {
    let promiseArr = []
    let fileIds = []     // 将图片的fileId存放到一个数组中
    if(this.data._id) {
      // 修改
      var imgLength = this.data.exitxqList.length;
    } else {
      // 添加
      var imgLength = this.data.imgTwo.length;
    }
    // 图片上传
    for (let i = 0; i < imgLength; i++) {
      let p = new Promise((resolve, reject) => {
        if(this.data._id) {
          // 修改
          var item = this.data.exitxqList[i]
        } else {
          // 添加
          var item = this.data.imgTwo[i]
        }
        let suffix = /\.\w+$/.exec(item)[0]
        wx.cloud.uploadFile({    
          cloudPath: 'detailsMap/' + Date.now() + '-' + Math.random() * 1000000 + suffix, 
          filePath: item,
          success: (res) => {
            fileIds = fileIds.concat(res.fileID)       // 拼接   
            if(this.data._id) {
              // 修改
              var twoPic = this.data.imgTwo // 编辑-原本已经上传到云存储的图片列表
              fileIds.push(...twoPic)
              let newArr1 = []
              fileIds.forEach(item => {
                if(!item.startsWith("http")){
                  newArr1.push(item)
                }
              })
              // 去重
              newArr1 = [...new Set(newArr1)]
              this.setData({
                xqList: newArr1,
                newAddXqt: newArr1,
                xqbd: false
              })
            } else {
              // 添加
              this.setData({
                xqList: fileIds
              }) 
            }
            console.log(this.data.xqList);  // 2次
            resolve()
          },
          fail: (err) => {
            console.error(err)
            reject()
          }
        })
      })
      promiseArr.push(p)
    }
    Promise.all(promiseArr)
      .then((res) => {
        console.log('详情图上传到云存储成功');
      })
      .catch((err) => {
        console.error(err)       // 上传图片失败
        wx.showToast({
          title: '上传失败 请再次点击发布',
          icon: 'none',
          duration: 3000
        })
      })
  },
  // 点击发布商品
  releaseshop(){
    this.addshops()    // 调用添加商品方法,将商品所有数据传入云数据库
  },
  dataFun(){
    if (this.data.lbbd === false && this.data.xqbd === true) {
      // 如果编辑时点击了选择轮播图
      var arr = this.data.imgTwo
      var arr1 = []
      arr.forEach(item => {
        console.log(item);
        if(item.indexOf('wxfile') === -1) {
          arr1.push(item)
        }
      })
      this.setData({
        xqList: [...new Set(arr1)]
      })
    } else if(this.data.xqbd === false && this.data.lbbd === true) {
      var arr = this.data.imgOne
      var arr2 = []
      arr.forEach(item => {
        if(item.indexOf('wxfile') === -1) {
          arr2.push(item)
        }
      })
      // 如果编辑时点击了选择详情图
      this.setData({
        imageList: [...new Set(arr2)]
      })
    } 
    else if(this.data.xqbd === false && this.data.lbbd === false) {
      var arr = this.data.newAddLbt;
      var arrn = []
      var arr2 = this.data.newAddXqt
      var arrnn = []
      arr.forEach(item => {
        if(item.indexOf('wxfile') === -1) {
          arrn.push(item)
        }
      })
      arr2.forEach(item => {
        if(item.indexOf('wxfile') === -1) {
          arrnn.push(item)
        }
      })
      // 如果编辑时轮播图和详情图都点击了
      this.setData({
        imageList: [...new Set(arrn)],
        xqList: [...new Set(arrnn)]
      })
    } 
    else if (this.data.xqbd === true && this.data.lbbd === true) {
      var arr = this.data.imgTwo
      var arr1 = []
      arr.forEach(item => {
        if(item.indexOf('wxfile') === -1) {
          arr1.push(item)
        }
      })
      var arr = this.data.imgOne
      var arr2 = []
      arr.forEach(item => {
        if(item.indexOf('wxfile') === -1) {
          arr2.push(item)
        }
      })
      // 如果编辑时都没点击
      this.setData({
        imageList: [...new Set(arr2)],
        xqList: [...new Set(arr1)]
      })
    }
  },
  // 将商品添加到云数据库
  addshops(){
    if(this.data._id){
      this.dataFun()
      // 去掉wxfile图片文件
      let arr = this.data.imageList;
      var arr1 = []
      arr.forEach(item => {
        if(item.indexOf('wxfile') === -1) {
          arr1.push(item)
        }
      })
      let arrr = this.data.xqList;
      var arr2 = []
      arrr.forEach(item => {
        if(item.indexOf('wxfile') === -1) {
          arr2.push(item)
        }
      })
      // 修改商品
      wx.cloud.database().collection('releaseProduct')
      .doc(this.data._id)
      .update({
        data: {
          shopTitle: this.data.shopTitle,
          shopIntroduce: this.data.shopIntroduce,
          shopPrice: this.data.shopPrice,
          shopStock: this.data.shopStock,
          postage: this.data.postage,
          integral: this.data.integral,
          lbtImg: arr1,
          xqList: arr2
        }
      }).then(res => {
        console.log('修改成功',res);
        //  跳转到我的店铺
        wx.navigateTo({
          url: '../myshop/myshop'
        })
        // 修改成功提示的方法
        wx.showToast({
          title: '修改成功',
        })
      }).catch(err => {
        wx.showToast({
          title: '修改失败',
          icon: 'none',
          duration: 3000
        })
      })
    } else {
      // 添加数据
      wx.cloud.database().collection('releaseProduct')
      .add({
        data: {
          shopTitle: this.data.shopTitle,
          shopIntroduce: this.data.shopIntroduce,
          shopPrice: this.data.shopPrice,
          shopStock: this.data.shopStock,
          postage: this.data.postage,
          integral: this.data.integral,
          lbtImg: this.data.imageList,
          xqList: this.data.xqList
        }
      }).then(res => {
        //  跳转到我的店铺
        wx.navigateTo({
          url: '../myshop/myshop'
        })
        // 发布成功提示的方法
        wx.showToast({
          title: '发布成功',
        })
      }).catch(err => {
        wx.showToast({
          title: '发布失败',
          icon: 'none',
          duration: 3000
        })
      })
    }
  },
  // 轮播图删除图片功能
  reBackImg: function (e) {
    let dataset = e.currentTarget.dataset
    let index = dataset.index
    console.log(index)
    let arr = this.data.imgOne
    let arr1 = this.data.imageList
    if(this.data._id) {
      // 修改时点击删除
      arr1.splice(index,1)
      arr.splice(index, 1)
    } else {
      // 添加时点击删除
      arr.splice(index, 1)
    }
    // 编辑时删除已经上传云存储的图片
    wx.cloud.deleteFile({
      fileList: [e.currentTarget.dataset.main],
      success(res){
        console.log(res,'删除文件11111')
      },
      fail(err){
        console.log(err)
      }
    })
    // 添加图片icon是否显示
    if (arr.length < this.data.MAXCOUNTIMAGE && this.data.imgOneSwitch === false) {
      this.setData({
        imgOneSwitch: true
      })
    }
    this.setData({
      imgOne: arr,
    })
  },
  // 预览图片
  previewImg: function (e) {
    console.log('放大图片')
    let index = e.currentTarget.dataset.index
    let item = this.data.imgOne[index]
    console.log(item)
    wx.previewImage({
      current: item, // 当前显示图片的http链接
      urls: this.data.imgOne // 需要预览的图片http链接列表
    })
  },
  // 删除图片功能
  reBackImgTwo: function (e) {
    console.log(e.currentTarget.dataset.main);
    let dataset = e.currentTarget.dataset
    let index = dataset.index
    console.log(index)
    let arr = this.data.imgTwo
    let arr2 = this.data.xqList
    if(this.data._id) {
      // 修改时点击删除
      arr2.splice(index,1)
      arr.splice(index, 1)
    } else {
      // 添加时点击删除
      arr.splice(index, 1)
    }
    // 编辑/添加时删除已经上传云存储的图片
    wx.cloud.deleteFile({
      fileList: [e.currentTarget.dataset.main],
      success(res){
        console.log(res,'删除文件11111')
      },
      fail(err){
        console.log(err)
      }
    })
    if (arr.length < this.data.MAXCOUNTIMAGE && this.data.imgTwoSwitch === false) {
      this.setData({
        imgTwoSwitch: true
      })
    }
    this.setData({
      imgTwo: arr
    })
  },
  // 预览图片
  previewImgTwo: function (e) {
    console.log('放大图片')
    let index = e.currentTarget.dataset.index
    let item = this.data.imgTwo[index]
    console.log(item)
    wx.previewImage({
      current: item, // 当前显示图片的http链接
      urls: this.data.imgTwo // 需要预览的图片http链接列表
    })
  },
  onLoad: function (options) {
    if(!options.queryBean) {
      return false
    }
    var queryBean = JSON.parse(options.queryBean)
    // detailsData: queryBean
    this.setData({
      integral: queryBean.integral,
      shopTitle: queryBean.shopTitle,
      shopIntroduce: queryBean.shopIntroduce,
      shopStock: queryBean.shopStock,
      shopPrice: queryBean.shopPrice,
      postage: queryBean.postage,
      imgOne: queryBean.lbtImg,
      imgTwo: queryBean.xqList,
      _id: queryBean._id
    })
    console.log(this.data.detailsData);
  }
})