微信小程序实现图片上传、删除和预览功能的方法
作者:anLazyAnt 发布时间:2023-09-20 08:54:30
标签:微信小程序,图片
本文实例讲述了微信小程序实现图片上传、删除和预览功能的方法。分享给大家供大家参考,具体如下:
这里主要介绍一下微信小程序的图片上传图片删除和图片预览
布局
<view class="img-v">
<view class="img" wx:for="{{imgs}}" wx:for-item="item" wx:key="*this">
<image src="{{item}}" data-index="{{index}}" mode="aspectFill" bindtap="previewImg"></image>
<view class="delete-btn" data-index="{{index}}" catchtap="deleteImg"></view>
</view>
<view class="upload-img-btn" bindtap="chooseImg"></view>
</view>
JS处理
data: {
imgs: []
},
// 上传图片
chooseImg: function (e) {
var that = this;
var imgs = this.data.imgs;
if (imgs.length >= 9) {
this.setData({
lenMore: 1
});
setTimeout(function () {
that.setData({
lenMore: 0
});
}, 2500);
return false;
}
wx.chooseImage({
// count: 1, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
success: function (res) {
// 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
var tempFilePaths = res.tempFilePaths;
var imgs = that.data.imgs;
// console.log(tempFilePaths + '----');
for (var i = 0; i < tempFilePaths.length; i++) {
if (imgs.length >= 9) {
that.setData({
imgs: imgs
});
return false;
} else {
imgs.push(tempFilePaths[i]);
}
}
// console.log(imgs);
that.setData({
imgs: imgs
});
}
});
},
// 删除图片
deleteImg: function (e) {
var imgs = this.data.imgs;
var index = e.currentTarget.dataset.index;
imgs.splice(index, 1);
this.setData({
imgs: imgs
});
},
// 预览图片
previewImg: function (e) {
//获取当前图片的下标
var index = e.currentTarget.dataset.index;
//所有图片
var imgs = this.data.imgs;
wx.previewImage({
//当前显示图片
current: imgs[index],
//所有图片
urls: imgs
})
}
希望本文所述对大家微信小程序开发有所帮助。
来源:http://blog.csdn.net/anlazyant/article/details/77374905
0
投稿
猜你喜欢
- li {list-style-image: url(images/disc.gif);}li的这个样式定义是将列表项目使用图片来代替显示的小
- PHP mysqli_stat() 函数创建 SSL 连接:<?php// 假定数据库用户名:root,密码:123456,数据库:c
- 学习目的 接触验证控件 昨天介绍了SQL SERVER插入数据,但是我们省略了验证输入这一步。以前的做法是用语句逐个判断输入的正确性,如是否
- 1、什么是超链接图标规范超链接图标规范是我根据《Iconize Textlinks with CSS》修改调整完成的。主要是整理出常用到的一
- window.onload=function() {&
- 数组:复制传递(不要按照c/c++的方式去理解,c/c++中数组是引用传递),定长切片:引用传递,底层实现是3个字段 array(数组) +
- 我想大家都有一些开了80端口的肉 * ,如果是国内的出于安全就不要往下看了,如果不不妨往下看一下,小弟献丑了,以求抛砖引玉。在肉鸡上放网站最麻
- 完成asp语言对XML文档中指定节点文本的增加、删除、修改、查看 <% '-------------------
- 综述:本文讨论了VBScript和 JScript之间的区别,以及它们的使用场合。推荐:Vbscript5.5中文语言参考手册chm格式下载
- 本文实例讲述了php+js实现的无刷新下载文件功能。分享给大家供大家参考,具体如下:服务器端页面步骤就是,设置头文件参数,然后读入并输出文件
- Javascript中的eval函数让我们可以很方便地操作一系列变量(a1,a2,a3,……)。自从VBScript 5.0之后,我们也可以
- 一、概念 1. 数据库 (Database)什么是数据库?数据库是依照某种数据模型组织起来并存放二级存储器中的数据集合。这种数据集合具有如下
- 之前看到很多人一直都问CSS 中DIV垂直居中的问题,看来对此的需求还不少。现在就把我经验拿出来分享一下,希望大家鼓鼓掌。因为在 CSS 中
- 网上有很多提供在线按钮制作、文字标题制作、Logo制作服务的网站,它们可以非常方便了让大家轻松的获得效果出色的各类图标型的图片,下面就快来看
- 微信小程序全称微信公众平台·小程序,原名微信公众平台·应用号(简称微信应用号)声明•微信小程序开发工具类似于一个轻量级的IDE集成开发环境,
- 【原理介绍】通过NETCONF,网管能够用可视化的界面统一管理网络中的设备,并且安全性高、可靠性强、扩展性强。如下图所示,网管与网络中的所有
- 用XMLHTTP Post Form时的表单乱码有两方面的原因——Post表单数据时中文乱码;服务器Response被XMLHTTP不正确编
- <table> <tr> &nb
- 大家在写按钮(input、button)的时候会发现在 IE 下:随着字数的增多,两边的间距也会越来越大。在 WIN 的XP 风格下,当字数
- 如何编写具有良好结构的CSS?如果在设计流程中缺乏"秩序"或"章法"是非常不利的,你得冒着风险去添加