微信小程序从本地相册选择图片或使用相机拍照之我的理解

最新推荐文章于 2022-04-24 17:19:00 发布

原创最新推荐文章于 2022-04-24 17:19:00 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#微信 #小程序 #上传图片 #双向数据绑定

微信小程序同时被 2 个专栏收录

11 篇文章

订阅专栏

微信小程序开发

8 篇文章

订阅专栏

本文介绍了一个小程序中实现图片上传的功能，包括使用wxml、wxss和js代码来展示上传按钮和预览已选图片的方法。重点讲解了如何利用wx.chooseImage API选择图片，并通过setData更新页面数据以实时显示图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

wxml:

<view>
  <button class="btn" catchtap="upLoad">上传</button>
  <view class='box'>
  block遍历
    <block wx:for="{{src}}">
      <image src='{{item}}'></image>
    </block>
  </view>
</view>

wxss:

/** wxss **/
/** 修改默认的navigator点击态 **/
.btn{
  width: 100rpx;
  height: 100rpx;
  font-size: 20rpx;
}
.box image{
  width: 100rpx;
  height: 100rpx;
}

js:

// map.js
var arr = [];
//这里是个大坑！！！空数组一定要设置到最外面，不然每次上传的时候，都会先清空，当初快给我整奔溃了，一定要注意。
Page({
  upLoad:function(){
    data: {
      src: ''
    }

    var self = this;
    wx.chooseImage({
      count: 9, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;            
        arr = arr.concat(tempFilePaths); 
        //把获取到的图片的地址（数组），赋值给data中的src。    
        self.setData({ src: arr });
      }
    }) 
  }
})