小程序的图片上传和显示

在商城的发布页面，我们需要上传图片，存在云端，再显示在商品页面，可以参考这篇文章https://blog.csdn.net/Cheny_Yang/article/details/89033021
1、小程序上传图片功能实现需要注意以下几个点：
（1）图片最多上传9张（默认）
（2）上传后的图片会生成一个临时的地址，用过这个临时地址将图片上传到数据库
（3）图片保存的位置是在云开发控制台的 本地存储中
（4）图片只能是一张一张的上传
（5）保存在本地存储中的图片不能重名
（6）可以使用js中的new Date().getTime()返回一个毫秒值作为图片的名称，这个毫秒值是不会重复的
（7）图片的后缀可以用正则表达式取得let suffix = /.[^.]+$/.exec(filePath)[0]
（8）每次上传成功后，回调函数会返回一个fileID
（9）保存在数据库集合中的记录应该是这个 fileID
（10）你无法确定什么时候9张图片才能都上传成功，只有当所有图片都上传成功之后，你才能取到所有的fileID，所以每次执行上传图片操作时，都为其构建一个Promise对象，当所有的Promise都执行成功之后，这时候再插入字段到数据库中，需要用到Promise.all()方法
选择图片的函数

//选择图片
  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)
      }
    });
  },

上传数据

 //图片相关
    let imgList = this.data.imgList
    if (!imgList || imgList.length < 1) {
      wx.showToast({
        icon: "error",
        title: '请选择图片'
      })
      return
    }
    wx.showLoading({
      title: '发布中...',
    })

    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: 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('goods').add({
        data: {
          name: user.name,
          avatarUrl: user.avatarUrl,
          content: good.content,
          num: parseInt(good.num),
          price: parseInt(good.price),
          name: good.name,
          school: good.school,
          type: good.type, //类型
          phone: good.phone, //电话
          img: this.data.fileIDs,
          status: '上架',
          tuijian: false, //是否上推荐位
          _createTime: new Date().getTime() //创建的时间
        },
        success: res => {
          wx.hideLoading()
          wx.showToast({
            title: '发布成功',
          })
          //清空数据
          this.setData({
            imgList: [],
            fileIDs: [],
          })
          console.log('发布成功', res)
          wx.navigateTo({
            url: '/pages/seller/seller',
          })
        },
        fail: err => {
          wx.hideLoading()
          wx.showToast({
            icon: 'error',
            title: '网络不给力....'
          })
          console.error('发布失败', err)
        }
      })
    })
  },

另外重置功能

 // 重置
  reset() {
    console.log('点击了重置')
    this.setData({
      imgList: [],
      fileIDs: [],
    })
  }