WXML:

  1. <view class="weui">
  2. <view class="weui-uploader">
  3. <view class="weui-uploader__files">
  4. <block wx:for="{{imageList}}" wx:for-item="image" wx:for-index='idx'>
  5. <view class="weui-uploader__file">
  6. <image class="weui-uploader__img" src="{{image}}" data-id="{{idx}}" data-src="{{image}}" bindtap="previewImage"></image>
  7. </view>
  8. </block>
  9. </view>
  10. <view class="weui-uploader__input-box">
  11. <view class="weui-uploader__input" bindtap="chooseImage"></view>
  12. </view>
  13. </view>
  14. </view>

WXSS:

  1. page {
  2. font-family: -apple-system-font, "Helvetica Neue", sans-serif;
  3. }
  4. icon {
  5. vertical-align: middle;
  6. }
  7. .weui{
  8. width: 100%;
  9. height: auto;
  10. display: flex;
  11. flex-direction: column;
  12. background-color: #fff;
  13. }
  14. .weui-uploader{
  15. width: 94%;
  16. margin-left: 3%;
  17. padding: 0px 0px 9px;
  18. }
  19. .weui-uploader__file {
  20. float: left;
  21. margin-right: 9px;
  22. margin-top: 9px;
  23. }
  24. .weui-uploader__img {
  25. display: block;
  26. width: 79px;
  27. height: 79px;
  28. }
  29. .weui-uploader__file_status {
  30. position: relative;
  31. }
  32. .weui-uploader__input-box {
  33. float: left;
  34. position: relative;
  35. margin-right: 9px;
  36. margin-top: 9px;
  37. width: 77px;
  38. height: 77px;
  39. border: 1px solid #d9d9d9;
  40. }
  41. .weui-uploader__input-box:before, .weui-uploader__input-box:after {
  42. content: " ";
  43. position: absolute;
  44. top: 50%;
  45. left: 50%;
  46. -webkit-transform: translate(-50%, -50%);
  47. transform: translate(-50%, -50%);
  48. background-color: #d9d9d9;
  49. }
  50. .weui-uploader__input-box:before {
  51. width: 2px;
  52. height: 39.5px;
  53. }
  54. .weui-uploader__input-box:after {
  55. width: 39.5px;
  56. height: 2px;
  57. }
  58. .weui-uploader__input-box:active {
  59. border-color: #999;
  60. }
  61. .weui-uploader__input-box:active:before, .weui-uploader__input-box:active:after {
  62. background-color: #999;
  63. }
  64. .weui-uploader__input {
  65. position: absolute;
  66. z-index: 1;
  67. top: 0;
  68. left: 0;
  69. width: 100%;
  70. height: 100%;
  71. opacity: 0;
  72. }

JS:

  1. Page({
  2. data: {
  3. imageList: [],
  4. },
  5. chooseImage: function (event) {
  6. var that = this;
  7. wx.chooseImage({
  8. count: 5, // 一次最多可以选择2张图片一起上传
  9. sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  10. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  11. success: function (res) {
  12. var imgeList=that.data.imageList.concat(res.tempFilePaths);
  13. that.setData({
  14. imageList: imgeList
  15. });
  16. }
  17. })
  18. },
  19. previewImage: function (e) {
  20. var that = this;
  21. var dataid = e.currentTarget.dataset.id;
  22. var imageList = that.data.imageList;
  23. wx.previewImage({
  24. current: imageList[dataid],
  25. urls: this.data.imageList
  26. });
  27. }
  28. })

微信小程序wx.chooseImage和wx.previewImage的综合使用(图片上传不限制最多张数)的更多相关文章

  1. PHP后端代码生成微信小程序带参数的二维码保存成jpg图片上传到服务器getwxacodeunlimit

    老板最近有点飘了,他要在PC端的网站放一个微信小程序的二维码,并且扫描这个二维码以后要跳到小程序对应的房源详情页. 这是微信官方给出的文档,连接地址:https://developers.weixin ...

  2. 微信小程序数据请求方法wx.request小测试

    微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...

  3. 微信小程序wepy开发循环wx:for需要注意

    微信小程序wepy开发循环wx:for需要注意 item index值必须在wx:for之后使用 <view wx:for="{{tablist}}" class=" ...

  4. 微信小程序-用户拒绝授权使用 wx.openSetting({}) 重新调起授权用户信息

    场景模拟:用户进入微信小程序-程序调出授权 选择拒绝之后,需要用到用户授权才能正常使用的页面,就无法正常使用了. 解决方法:在用户选择拒绝之后,弹窗提示用户 拒绝授权之后无法使用,让用户重新授权(微信 ...

  5. 微信小程序如何在使用wx.request使用cookie

    我主要是做asp.net mvc后端开发的,经常使用Jquery的ajax与后台的Web API进行数据交互. 最近公司要做一个小程序,要实现小程序与Web前端的通信,当然小程序是可以实现socket ...

  6. 微信小程序的坑之wx.miniProgram.postMessage

    工作中有个需求是小程序的网页在关闭的时候,需要回传给小程序一个参数 查阅小程序官方文档,有这样一个接口 wx.miniProgram.postMessage ,可以用来从网页向小程序发送消息,然后通过 ...

  7. 微信小程序组件——详解wx:if elif else的用法

    背景 在学习微信小程序开发wxml页面时,需要使用if,else来判断组件是否进行展示,代码如下 <view wx:if="{{is_login==1}}">成功登录& ...

  8. 微信小程序踩坑之一[wx.request]请求模式

    最近在做小程序时,使用wx.request()方法请求时, 当使传输string类型时,一定要声明method请求模式为post,否则会一直报错,而不声明时默认为get, 已填坑 =,= wx.req ...

  9. 微信小程序_(校园视)开发视频的展示页_上

    微信小程序_(校园视) 开发用户注册登陆 传送门 微信小程序_(校园视) 开发上传视频业务 传送门 微信小程序_(校园视) 开发视频的展示页-上 传送门 微信小程序_(校园视) 开发视频的展示页-下 ...

随机推荐

  1. 20145314郑凯杰《网络对抗技术》PE文件病毒捆绑(插入捆绑)的实现

    20145314郑凯杰<网络对抗技术>PE文件病毒捆绑(插入捆绑)的实现 一.本节摘要 简介:每个应用程序内部都有一定的空间(因为文件对齐余留的00字段)可以被利用,这样就可以保证被插入的 ...

  2. 删除string类型字符串中指定字符串段

    1.实现背景 在插入list行时用邮件的MessageID给对应行命名. 在回复全部邮件时,收件人变为之前收件人中出去“自己”同时加入之前发件人,抄送人还是之前的抄送人,密送人不用管,直接不用带. 在 ...

  3. 格式化输出%与format

    一.%的用法 1.1整数输出 %o —— oct 八进制 : %d —— dec 十进制 : %x —— hex 十六进制 >>> print('%o' % 20) 24 >& ...

  4. TeeChart的坐标轴

    TeeChart一共有六个坐标轴,一下是默认值 tChart1.Axes.Bottom.Visible = true;//横轴 tChart1.Axes.Left.Visible = true;//纵 ...

  5. hdu 6180 Schedule

    Schedule Problem Description There are N schedules, the i-th schedule has start time si and end time ...

  6. 51nod 1413 权势二进制

    本来刚开始还是想用每一位 -1的个数 然后再乘以10  不断累加 后来发现 完全不是这回事啊  因为本身就是0 和 1 所以只要记录出现的最大的数字 就是答案  因为 n >= 1 // 所以不 ...

  7. 机器学习-数据可视化神器matplotlib学习之路(一)

    直接上代码吧,说明写在备注就好了,这次主要学习一下基本的画图方法和常用的图例图标等 from matplotlib import pyplot as plt import numpy as np #这 ...

  8. RN的第一个API-----注册组件Appregistry

    首先解释下AppRegistry是JS运行所有React Native应用的入口  什么是入口? 1.在我们初始化一个react native项目的时候 默认的index.ios.js/index.i ...

  9. 广州工业大学2016校赛 F 我是好人4 dfs+容斥

    Problem F: 我是好人4 Description 众所周知,我是好人!所以不会出太难的题,题意很简单 给你n个数,问你1000000000(含1e9)以内有多少个正整数不是这n个数任意一个的倍 ...

  10. WM_COPYDATA

    1. WM_COPYDATA : https://msdn.microsoft.com/en-us/library/windows/desktop/ms649011(v=vs.85).aspx COP ...