Use watercress api to write a small program (small program notes) saved 3.2 asynchronous upload pictures to the cloud server

1 First, add the upload button

< Van-the Button of the type = "default" bindtap = "uploadImg" > upload pictures

2 Add uploadImg method

 

  / * * 
   * Page initial data 
   * / 
  Data: { 
    Detail: {}, 
    Content: '', // content rating, 
    Score:. 5, // current evaluation scores 
    Images: [], // uploaded image 
    fileIds : [], // ID of the uploaded image cloud storage 
    MovieID: -1 
  },

 

  uploadImg: function (Event) {
     // select image 
    wx.chooseImage ({ 
      COUNT: . 9 , 
      SizeType: [ 'Original', 'Compressed' ], 
      the sourceType: [ 'Album', 'Camera' ], 
      Success: RES => {
         // the Tempfilepath image may be displayed as a tag img src attribute 
        const = tempFilePaths res.tempFilePaths;
         // the console.log (tempFilePaths); 
        the this .setData ({
           // get the current picture and then stitching together images, if the direct assignment overwrites out 
          Images: the this .data.images.concat (tempFilePaths) 
        }); 
      }
    })
  },

3 uploaded images displayed cycle

<view>
<image class="comment-img" wx:for="{{images}}" wx:key="{{index}}" src="{{item}}" >
</image>
</view>

/* pages/comment/comment.wxss */
.comment-img{
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
}

<-------- uploaded image

4 upload to cloud storage, cloud storage and then return fileid