首页 > 微信 > 详细

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

时间:2019-09-26 18:22:10      阅读:112      评论:0      收藏:0      [点我收藏+]

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

 

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

原文:https://www.cnblogs.com/polax/p/11593166.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!