利用豆瓣api写个小程序(小程序笔记)3.2 异步上传图片保存到云服务器

1 首先,添加上传按钮

<van-button type="default" bindtap="uploadImg">上传图片

2 添加uploadImg方法

  /**
   * 页面的初始数据
   */
  data: {
    detail: {},
    content: '', //评价的内容,
    score: 5, //当前评价的分数
    images: [], //上传的图片
    fileIds: [], //上传的图片的云存储的id
    movieId: -1
  },
  uploadImg: function(event) {
    //选择图片
    wx.chooseImage({
      count: 9,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        // tempFilePath可以作为img标签的src属性显示图片
        const tempFilePaths = res.tempFilePaths;
        //console.log(tempFilePaths);
        this.setData({
          //取到当前图片的images 然后拼接起来,如果直接赋值 会覆盖掉
          images: this.data.images.concat(tempFilePaths)
        });
      }
    })
  },

3 把上传的图片循环显示出来

<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;
}

<--------已上传的图片

4 上传到云存储,然后云存储返回fileid

猜你喜欢

转载自www.cnblogs.com/polax/p/11593166.html
今日推荐