小程序上传多张图片

以前写过小程序网络和本地图片到相册的方法:https://www.jianshu.com/p/5479041607fa,写过上传一张或多张图片到阿里云OSShttps://www.jianshu.com/p/ea2e567b6f2c, 写过小程序加载本地图片路径问题https://www.jianshu.com/p/c0dd3e191322,这次写个布局关于多张图片上传。

效果图

思路: 整体图片选择使用一个view控件,前面选中的图片为一个block根据选择图片的数量来显示多少个,后面的选择图片按钮为一个view。选中图片上面的删除按钮,使用绝对定位和相对定位来处理。添加图片,删除图片,点击选中图片查看大图等添加一个点击事件

考虑问题: 1.上传的多少张图片? 2.上传后想删除? 3.如何控制布局,用好用flex布局。

关键代码:

 /** 选择图片 */
  chooseImage: function () {
    var that = this;
    wx.chooseImage({
      count: 9 - that.data.imgArr.length,
      sizeType: ['original', 'compressed'], 
      sourceType: ['album', 'camera'], 
      success: function (res) {
        if (res.tempFilePaths.count == 0) {
          return;
        }
        //上传图片
        var imgArrNow = that.data.imgArr;
        imgArrNow = imgArrNow.concat(res.tempFilePaths);
        that.setData({
          imgArr: imgArrNow
        })
        that.chooseViewShow();
      }
    })
  },

代码中的9是中最多传9张图片,图片类型是否为压缩,图片来源是相册还是相机。

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

删除照片,改变布局格式显示。

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

  /** 显示图片 */
  showImage: function (e) {
    var imgArr = this.data.imgArr;
    var itemIndex = e.currentTarget.dataset.id;

    wx.previewImage({
      current: imgArr[itemIndex], // 当前显示图片的http链接
      urls: imgArr // 需要预览的图片http链接列表
    })
  },

用到系统自带的方法,点击图片预览大图。

demo地址为:https://github.com/dt8888

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

第二天0605下午——超链接<a>与图片<img>

今天下午学习了超链接<a>标签和图片<img>标签,以下面代码为例: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

36280
来自专栏一“技”之长

Bootstrap响应式前端框架笔记四——表单

    在Bootstrap框架中,可以为表单标签添加form-control属性来为其设置默认样式,默认表单控件的宽度将充满父容器标签。需要注意,在布局表单时...

14410
来自专栏cnblogs

如何写好CSS系列之表单(form)

     表单模块可以分为两部分:一是表单的布局,也就是规范表单元素单元的排列位置;二是表单元素,如:输入框、单选、复选、列表组件、搜索组件等,由于列表组件、搜...

27090
来自专栏Google Dart

AngularDart Material Design 弹出框 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

7020
来自专栏性能与架构

微信小程序示例 - 交互组件

消息提示框 toast ? 代码结构 <toast bindchange="..."> 消息内容 </toast> 属性 duration - 消息显示...

44580
来自专栏青青天空树

认识基本的mfc控件

  几乎可以在每个windows程序中都看到按钮、复选框、文本框以及下拉列表等等,这些都是控件。而且很多常用的控件已经内置到操作系统当中了,在Visual C+...

11520
来自专栏python3

body标签中相关标签

字体标签包含:h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>

18010
来自专栏三木的博客

HTML概要

HTML CSS Javascript 的关系 HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等。 CSS...

34190
来自专栏河湾欢儿的专栏

04-修改 维护

想要改变图标的位置? 新功能,加个图标? 画布太大,文件空白太多? 图标多余,要删除?

10620
来自专栏deepcc

jquery nicescroll 配置参数

41380

扫码关注云+社区

领取腾讯云代金券