这里均用的是小程序原生api

废话不多说直接上栗子:

<view class="addImv">
      <!--这个是已经选好的图片-->
      <view wx:for="{{banner}}" wx:key="key" class="upFile" bindtap="showImageBanner" style="border-radius: 5px" data-id="{{index}}">
        <image class="itemImv" src="{{item}}"></image>
        <image class="closeImv" src="../../resources/images/delect.png" mode="scaleToFill" catchtap="deleteImvBanner" data-id="{{index}}"></image>
      </view>

      <!--这个是选择图片-->
      <view class="chooseView" bindtap="chooseBanner" style="border-radius: 5px" wx:if="{{chooseViewShowBanner}}">
        <image class="chooseImv" src="../../resources/images/add.png"></image>
      </view>
    </view>
/*选择图片View*/

.addImv {
  background-color: white;
  /* border: 1px dashed gray; */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 5rpx;
}

.upImv {
  background-color: white;
  width: 100%;
  margin-top: 5rpx;
}

.upImv_text {
  font-size: 30rpx;
  margin-left: 20rpx;
  padding-top: 20rpx;
}

/*添加图片*/

.addImv .chooseView {
  width: 180rpx;
  height: 180rpx;
  margin: 20rpx 20rpx;
  background-color: #f2f6f9;
  border: 1px dashed lightgray;
  text-align: center;
  line-height: 180rpx;
  /* padding: 0rpx 7rpx; */
  border-radius: 5px;
  margin-left: 40rpx;
}

.addImv .chooseImv {
  width: 50rpx;
  height: 50rpx;
}

/*已选择的图片*/

.addImv .upFile {
  width: 180rpx;
  height: 180rpx;
  position: relative;
  padding: 0rpx 7rpx;
  margin-left: 40rpx;
  border: 1px solid #c0ccda;
}

.addImv .upFile .itemImv {
  width: 180rpx;
  height: 180rpx;
  padding: 0rpx 7rpx;
}

.addImv .upFile .closeImv {
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  width: 50rpx;
  height: 50rpx;
}

CSS

Page({

  /**
   * 页面的初始数据
   */
  data: {
    banner: [], //轮播图片
  },

  /** 选择图片Banner */
  chooseBanner: function() {
    var that = this;
    if (this.data.banner.length < 2) {
      wx.chooseImage({
        count: 2, //最多选择2张图片- that.data.banner.length,
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
        success: function(res) {
          // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
          console.log(res.tempFilePaths);
          if (res.tempFilePaths.count == 0) {
            return;
          }
          //上传图片
          var imgArrNow = that.data.banner;
          imgArrNow = imgArrNow.concat(res.tempFilePaths);
          that.setData({
            banner: imgArrNow
          })
          that.chooseViewShowBanner();
        }
      })
    } else {
      wx.showToast({
        title: '限制选择6个文件',
        icon: 'loading',
        duration: 1000
      })
    }
  },

  /** 删除图片Banner */
  deleteImvBanner: function(e) {
    var banner = this.data.banner;
    var itemIndex = e.currentTarget.dataset.id;
    banner.splice(itemIndex, 1);
    this.setData({
      banner: banner
    })
    //判断是否隐藏选择图片
    this.chooseViewShowBanner();
  },

  /** 是否隐藏图片选择Banner*/
  chooseViewShowBanner: function() {
    if (this.data.banner.length >= 2) {
      this.setData({
        chooseViewShowBanner: false
      })
    } else {
      this.setData({
        chooseViewShowBanner: true
      })
    }
  },

  /** 查看大图Banner */
  showImageBanner: function(e) {
    var banner = this.data.banner;
    var itemIndex = e.currentTarget.dataset.id;
    console.log("itemIndex:" + JSON.stringify(e))
    wx.previewImage({
      current: banner[itemIndex], // 当前显示图片的http链接
      urls: banner // 需要预览的图片http链接列表
    })
  },
})

JS

小程序图片选择到这里就结束了,如有不明白的地方欢迎留言一起讨论

微信小程序图片选择,预览和删除的更多相关文章

  1. 微信小程序图片放大预览

    需求:当点击图片时,当前图片放大预览,且可以左右滑动 实现方式:使用微信小程序图片预览接口 我们可以看到api需要两个参数,分别通过下面的data-list和data-src来传到js中 wxml代码 ...

  2. 原创:跳坑指南——微信小程序真机预览跟本地不同的问题

    微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考:本地看不到数据,就先让本地能看到数据,再看本帖.... 1:本 ...

  3. 微信小程序真机预览跟本地不同的问题。原文地址:https://blog.csdn.net/qq_27187991/article/details/69664247/

    微信小程序中出现最多的一个问题,就是真机跟本地不同:我简单列举一些我发现的原因,给大家参考,大家也可以把自己发现的东西回复给我,给我参考: 本地看不到数据,就先让本地能看到数据,再看本帖....特别提 ...

  4. 【微信小程序】微信小程序wx.previewImage预览图片

    一.小知识 二.例子,配合轮播图使用效果更佳!(如图1) 1.wxml <scroll-view scroll-y="true"> <swiper catchta ...

  5. 微信小程序--图片相关问题合辑

    图片上传相关文章 微信小程序多张图片上传功能 微信小程序开发(二)图片上传 微信小程序上传一或多张图片 微信小程序实现选择图片九宫格带预览 ETL:微信小程序之图片上传 微信小程序wx.preview ...

  6. 微信小程序图片上传和裁剪

    本篇博客用于解决微信小程序图片裁剪问题 图片裁剪常用于头像选择和图片合成等. 图片裁剪解决方案: 目前网络上知名的微信小程序图片裁剪插件是we-cropper(文末有链接) 操作步骤:下载好we-cr ...

  7. 微信小程序 图片裁剪

    微信小程序 图片裁剪 分享一个微信小程序图片裁剪插件,很好用,支持旋转 文档:https://github.com/wyh19931106/image-cropper 1.json文件中添加image ...

  8. 微信小程序图片保存到本地

    微信小程序图片保存到本地是一个常用功能: 这里讲解下完整实现思路: 因为微信官方的授权只弹一次,用户拒绝后再次调用,就需要结合button组件的微信开放能力来调起,以下方案在微信各种授权中可参考. w ...

  9. 5行代码实现微信小程序图片上传与腾讯免费5G存储空间的使用

    本文介绍了如何在微信小程序开发中使用腾讯官方提供的云开发功能快速实现图片的上传与存储,以及介绍云开发的 5G 存储空间的基本使用方法,这将大大提高微信小程序的开发效率,同时也是微信小程序系列教程的视频 ...

随机推荐

  1. JavaScript Simple Explain and Use

    Javascript 说明: JavaScript 和 Java 之间几乎没有任何关系. JavaScript原名为LiveScript,他的作用只是为了处理一些复杂的动态网页. 目前,JS是遵循EC ...

  2. VM 安装ubuntu16.04简易方法

    在已经安装好VM10虚拟机后 首先文件—>新建虚拟机—>典型(标准)  选择稍后安装操作系统,后续要使用的是已经下载好的ubuntu16.04镜像  选择操作系统是linux ,版本是ub ...

  3. web视频播放插件:Video For Everybody

    相比其它的web视频播放插件(video.js , jwplayer等)来说,Video For Everybody(极力推荐)是一款更好的视频播放插件,无需任何下载,支持html5以及flash播放 ...

  4. cocos2dx 2.1.x 退出SDK相关界面后EGLView 不刷新渲染

    报错内容为: [3390:1456879] failed to call contextcocos2d: surface size: 0x0[3390:1456879] Failed to make ...

  5. HDU 1542 Atlantics 线段树+离散化扫描

    将 x 轴上的点进行离散化,扫描线沿着 y 轴向上扫描 每次添加一条边不断找到当前状态有效边的长度 , 根据这个长度和下一条边形成的高度差得到一块合法的矩形的面积 #include<iostre ...

  6. SCOI2010第一场

    NOI2010全国青少年信息学奥林匹克竞赛 四川代表队选拔赛 第一场 题目名称 幸运数字 游戏 股票交易 英文代号 luckynumber game trade 时限 2秒 2秒 2秒 输入文件 lu ...

  7. postgresql 删除旧的版本9.5 并同时 升级到9.6

    sudo apt-get purge postgresql-9.5 On Ubuntu 14.04 I have done this to get the latest postgres: sudo ...

  8. SQL 为SQL Server服务指定的凭据无效怎么办

    如下所示,在安装SQL Server2008的时候,我随便输入了了账户名和密码,点击下一步没用   正确做法是:点击账户名右边的小三角,从下拉列表随便选一个("对所有SQL Server服务 ...

  9. logistic regression教程1

    实现线性拟合 我们用python2.7实现上一篇的推导结果.请先安装python matplotlib包和numpy包. 具体代码如下: #!/usr/bin/env python #! -*- co ...

  10. 在项目开发中使用Git版本号控制工具以提高效率

    安装Git(linux centos平台) 源代码方式安装 1.装依赖 $ yum install curl-devel expat-devel gettext-devel openssl-devel ...