WXML:

<view class="weui">
<view class="weui-uploader">
<view class="weui-uploader__files">
<block wx:for="{{imageList}}" wx:for-item="image" wx:for-index='idx'>
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="{{image}}" data-id="{{idx}}" data-src="{{image}}" bindtap="previewImage"></image>
</view>
</block>
</view>
<view class="weui-uploader__input-box">
<view class="weui-uploader__input" bindtap="chooseImage"></view>
</view>
</view>
</view>

WXSS:

page {
font-family: -apple-system-font, "Helvetica Neue", sans-serif;
}
icon {
vertical-align: middle;
}
.weui{
width: 100%;
height: auto;
display: flex;
flex-direction: column;
background-color: #fff;
}
.weui-uploader{
width: 94%;
margin-left: 3%;
padding: 0px 0px 9px;
}
.weui-uploader__file {
float: left;
margin-right: 9px;
margin-top: 9px;
}
.weui-uploader__img {
display: block;
width: 79px;
height: 79px;
}
.weui-uploader__file_status {
position: relative;
}
.weui-uploader__input-box {
float: left;
position: relative;
margin-right: 9px;
margin-top: 9px;
width: 77px;
height: 77px;
border: 1px solid #d9d9d9;
}
.weui-uploader__input-box:before, .weui-uploader__input-box:after {
content: " ";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-color: #d9d9d9;
}
.weui-uploader__input-box:before {
width: 2px;
height: 39.5px;
}
.weui-uploader__input-box:after {
width: 39.5px;
height: 2px;
}
.weui-uploader__input-box:active {
border-color: #999;
}
.weui-uploader__input-box:active:before, .weui-uploader__input-box:active:after {
background-color: #999;
}
.weui-uploader__input {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}

JS:

Page({
data: {
imageList: [],
},
chooseImage: function (event) {
var that = this;
wx.chooseImage({
count: 5, // 一次最多可以选择2张图片一起上传
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
var imgeList=that.data.imageList.concat(res.tempFilePaths);
that.setData({
imageList: imgeList
});
}
})
},
previewImage: function (e) {
var that = this;
var dataid = e.currentTarget.dataset.id;
var imageList = that.data.imageList;
wx.previewImage({
current: imageList[dataid],
urls: this.data.imageList
});
}
})

微信小程序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. 20145333茹翔 Exp5 MS08_067漏洞测试

    20145333茹翔 Exp5 MS08_067漏洞测试 实验过程 IP:kali:192.168.31.177.windows 2003 :192.168.31.223 使用命令msfconsole ...

  2. spring与spring-data-redis整合redis

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  3. 2、extract-text-webpack-plugin提取Sass编译的Css

    cnpm install css-loader --save-dev    //css-loader 是将css打包进js cnpm install style-loader --save-dev   ...

  4. c#传统SqlTransaction事务和TransactionScope事务

    事务有很多种,看了一些关于事务的问题,这里做下笔记····· 事务时单个的工作单位.如果某一事务成功,则在该事务中进行的所有数据更改均会提交,成为数据库中永久的组成部分.若果事务遇到错误,则必须取消或 ...

  5. 第四次程序设计作业 C++计算器计算及命令行的使用 前缀表达式方法实现

    关键词:前缀中缀后缀表达式 波兰式 命令行 myGithub 一.前言 很有意思的开发和学习经历,从刚刚开始看到作业思考半天到现在的Debug过程,对我来说都或多或少有所提升. 也许这个时候自己挺迷茫 ...

  6. UVa 1663 净化器

    https://vjudge.net/problem/UVA-1663 题意: 给m个长度为n的模板串,每个模板串包含字符0,1和最多一个星号"*",其中星号可以匹配0或1.例如, ...

  7. python 字符串转变量方法

    1.response=eval('requests.'+func.lower())(destURL, headers=requestHeaders, data=postData, params=que ...

  8. 【Django】【四】测试

    [Testing in Django] 通过参数可控制Django项目不同级别的测试. 1. 运行sign应用下所有的测试用例: \\guest\python manage.py test sign ...

  9. c++ 判断两个容器是否相等(equal)

    #include <iostream> // cout #include <algorithm> // equal #include <vector> // vec ...

  10. Linux 之 ./configure --prefix 命令

    参考 http://blog.sina.com.cn/s/blog_406127500101dsmy.html 源码的安装一般由3个步骤组成:配置(configure).编译(make).安装(mak ...