获取评价信息

上一篇我们使用Vant的van-field组件实现评价信息输入，并双向绑定评价信息，方便后续使用。

onCommentChange: function (event) {
    this.setData({
      comment: event.detail
    })
  },

获取评价星数

同理我们上一篇我们使用Vant的van-rate组件实现评级操作，并双向绑定评价登记，方便后续使用。

onRateChange: function (event) {
    this.setData({
      rate: event.detail
    })
  }

评价图片上传到云存储 & 评价内容保存到云数据库

首选完成上传图片的操作,通过API wx.chooseImage完成从本地相册选择图片或使用相机拍照完成上传图片。

上传图片代码如下：

uploadImage: function (event) {
    var that = this
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success(res) {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths)
        that.setData({
          imagesData: tempFilePaths
        })
      }
    })
  },

上传到云存储： 由于我们需要将图片上传完成之后，得到图片的fileID,才能实现评价信息的提交。我们这里使用Promise来实现。

点击提交时，将图片进行云存储

let that = this
// 图片上传到云存储
let promiseArr = []
for (let i = 0; i < that.data.imagesData.length; i++) {
  promiseArr.push(new Promise(function (resolve, reject) {
    let item = that.data.imagesData[i];
    wx.cloud.uploadFile({
      cloudPath: new Date().getTime() + ".png", // 云存储路径:上传到云存储上的名称
      filePath: item
    }).then(res => {
      // 获取上传图片的id
      that.setData({
        fileIds: that.data.fileIds.concat(res.fileID)
      })
      resolve()
    }).catch(err => {
      console.log(err)
    })
  }))
}

// 所有图片上传完成之后，评价内容保存到云数据库
Promise.all(promiseArr).then(res => {
  db.collection('comment').add({
    data: {
      comment: that.data.comment,
      rate: that.data.rate,
      goodsId: that.data.goodsId,
      fileIds: that.data.fileIds
    }
  }).then(res => {
    wx.hideLoading();
    wx.showToast({
      title: '评价成功',
    })
  }).catch(res => {
    wx.hideLoading();
    wx.showToast({
      title: '评价失败',
    })
  })
})

Promise对象用于异步操作，它表示一个尚未完成且预计在未来完成的异步操作。Promise在异步执行的流程中，把执行代码和处理结果的代码清晰地分离了，这样可以同时执行多个任务，而不用等到一个图片完成之后再上传另一个，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

Promse.all在处理多个异步处理时非常有用,等待所有都完成即promiseArr，图片上传完成之后，再继续以下操作。

将评价内容保存到云数据库， 首先需要在云数据库中新建一个数据库集合。

点击提交按钮后，可以在控制台>数据库中查看提交的数据信息

总结

本篇涉及的知识点有：

小程序图片上传
Promise异步操作
上传到云数据库

使用云开发实现项目的开发，其实并不复杂，只要掌握好数据的走向，并能采用正确的方法调用。接下来的篇章，还是继续优化该项目，希望大家持续关注。

创作不易，点个赞再走吧~~~

小程序云开发入门（7）-评价功能【重点】

获取评价信息

获取评价星数

评价图片上传到云存储 & 评价内容保存到云数据库

总结