微信小程序上传图片并预览,指定总共最多能上传几张

最新推荐文章于 2024-01-18 14:05:39 发布

原创最新推荐文章于 2024-01-18 14:05:39 发布 · 6.3k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#微信小程序 #上传图片 #总共最多可上传几张

本文介绍了一个WeChat小程序中的图片上传组件实现方法。该组件使用wxml和js结合实现，能够动态展示已选图片，并支持用户继续选择或替换图片，最多可上传五张图片。当上传图片数量达到四张时，上传按钮会自动隐藏。

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

wxml

<view class='tfright'>
      <view wx:for="{{tempFilePaths}}"><image src="{{item}}"></image></view>
      <view wx:if="{{tempFilePaths.length<=4}}"  bindtap='chooseimg'>+</view>
      //图片超过四张时上传按钮消失
</view>

js

chooseimg:function(){
    let _this = this;
    let len=0;
    if (_this.data.tempFilePaths!=null){
      len = _this.data.tempFilePaths.length;
    }//获取当前已有的图片
    wx.chooseImage({
      count: 5-len, //最多还能上传的图片数,这里最多可以上传5张
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      success: function (res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        let tempFilePathsimg = _this.data.tempFilePaths
        //获取当前已上传的图片的数组
        var tempFilePathsimgs=tempFilePathsimg.concat(tempFilePaths)
        //把当前上传的数组合并到原来的数组中
        _this.setData({
          tempFilePaths: tempFilePathsimgs
        })
       
      },

      fail:function(){
        wx.showToast({
          title: '图片上传失败',
          icon: 'none'
        })
        return;
      }
    })
  },