This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

This article will describe the implementation of evaluation functions through cloud development in detail.

This includes input evaluation information, selection of evaluation stars, uploading evaluation images to cloud storage, saving evaluation content to cloud database, and using Promise to deal with JS asynchronous problems.

Obtain evaluation information

In the previous article, we used Vant’s van-field component to implement evaluation information input and bi-directional binding of evaluation information for subsequent use.

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

Gets the number of rating stars

In the last article, we used Vant’s van-rate component to implement the rating operation and bi-directional binding of the rating register for further use.

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

Upload the evaluation images to the cloud storage & the evaluation content is saved to the cloud database

Select an image from your local album or take a photo with your camera using API wx.chooseImage.

Upload the image code as follows:

uploadImage: function (event) { var that = this wx.chooseImage({ count: 9, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], Success (res) {const tempFilePath = res.tempFilepaths console.log(tempFilePaths) that.setData({ imagesData: tempFilePaths }) } }) },Copy the code

Uploading to the cloud storage: We need to get the fileID of the image after uploading, so that the evaluation information can be submitted. We use a Promise here.

When you click submit, the image will be stored in the cloud

// 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", // Cloud storage path: name of file uploaded to the cloud storage: filePath: Item}).then(res => {// get id of image that. SetData ({fileIds: That.data.fileids.concat (res.fileid)}) resolve()}).catch(err => {console.log(err)})}))} 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: 'success ',})}).catch(res => {wx.hideloading (); Wx. showToast({title: 'failed to evaluate ',})})Copy the code

A Promise object is used for asynchronous operations. It represents an asynchronous operation that has not yet completed and is expected to complete in the future. Promise clearly separates the execution code from the resulting code in the asynchronous execution process so that multiple tasks can be executed at the same time without having to wait for one image to be completed before uploading another. The asynchronous operation is expressed as a synchronous operation process, avoiding layers of nested callback functions.

Promse.all is useful for handling multiple asynchronous processes. Wait until everything is finished (promiseArr) and the image is uploaded before continuing with the following operations.

To save the evaluation content to the cloud database, you first need to create a new database set in the cloud database.

After clicking the submit button, you can view the submitted data information in console > Database

conclusion

The knowledge points involved in this paper are:

  • Small program picture upload
  • Promise Asynchronous operation
  • Upload to the cloud database

Using cloud development to achieve project development is not complicated, as long as you have a good grasp of the data direction and can use the right method calls. In the next chapter, I will continue to optimize the project. I hope you will continue to pay attention.

Creation is not easy, click a like and then go ~~~