微信小程序实现上传多张图片、删除图片


Posted in Javascript onJuly 29, 2020

最近在做微信小程序,遇到上传多张图片到服务器,计算上传图片的张数,并且可以手动删除图片,下面是效果图

效果图:

微信小程序实现上传多张图片、删除图片

本来用的是小程序提供的 mp-uploader 上传图片的组件,无奈次组件删除效果不是我想要的,只能用 wx.chooseImage进行上传图片,在使用uplaodFile将图片发送给后台服务器。

下面直接展示代码:

wxml:

<view class="con_titles">
 <view class="con_left">
 <image src="../../images/comint.png"></image>
 <text class="titles_t">患者病历</text>
 </view>
 <view class="img_num">{{imgShow.length}}/6</view>
 
 </view>
 <view class="page__bd">
 <!-- <mp-uploader style='color:#353535' bindfail="uploadError" bindsuccess="uploadSuccess" select="{{selectFile}}" upload="{{uplaodFile}}" files="{{files}}" max-count="6" title="患者病历"></mp-uploader> -->
 
 <view class="add-image">
 <view class="images-boxc" wx:for="{{imgShow}}" wx:for-item="item" wx:key="image">
 <image class="image_size" data-index="{{index}}" data-src="{{item}}" src="{{item}}" bindtap="clickImage"></image>
 <image class="delete-image" data-index="{{index}}" src="../../images/delete_img.png" bindtap="deleteImage"></image>
 </view>
 <view class="images-add" wx:if="{{imgShow.length<6}}">
 <image class="image_size image_sizen" src="../../images/add_img.png" bindtap="chooseImage"></image>
 </view>
 </view>
</view>

wxss:

/* 上传图片 */
.images-boxc {
 position: relative;
 border: dashed 1px #bfbfbf;
 width: 139rpx;
 height: 139rpx;
 margin-right: 32rpx;
 margin-bottom: 32rpx;
}
.delete-image {
 position: absolute;
 width: 30rpx;
 height: 30rpx;
 right: 16rpx;
 top: 16rpx;
}
.add-image {
 display: flex;
 flex-wrap: wrap;
}
.image_size {
 width: 139rpx;
 height: 139rpx;
}
.image_sizen {
 height: 142rpx;
}

js:

data: {
 count: 6, //设置最多6张图片
 
 allImg: [],
 imgShow: [],
 
 },
// 上传图片
 chooseImage: function() {
 wx.showLoading({
 title: '加载中...',
 mask: true
 })
 var that = this;
 var imgShow = that.data.imgShow;
 var count = that.data.count - imgShow.length; //设置最多6张图片
 wx.chooseImage({
 count: count,
 sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function(res) {
 console.log(res)
 that.uplaodFile(res)
 for (var i = 0, h = res.tempFilePaths.length; i < h; i++) {
 imgShow.push(res.tempFilePaths[i]);
 that.setData({
 imgShow: imgShow
 })
 }
 wx.hideLoading({
 title: '加载中...',
 mask: false
 })
 
 }
 })
 },
 // 删除图片
 deleteImage(e) {
 let self = this;
 let index = e.target.dataset.index;
 let imgShow = self.data.imgShow;
 let allImg = self.data.allImg;
 allImg.splice(index, 1);
 imgShow.splice(index, 1);
 this.setData({
 imgShow: imgShow,
 allImg: allImg
 })
 },
 previewImage: function(e) {
 console.log(this.data.files)
 wx.previewImage({
 current: e.currentTarget.id, // 当前显示图片的http链接
 urls: this.data.files // 需要预览的图片http链接列表
 })
 },
 selectFile(files) {
 console.log('files', files)
 // 返回false可以阻止某次文件上传
 },
 uplaodFile(files) {
 console.log('upload files', files)
 let that = this
 files.tempFilePaths.forEach(element => {
 util.uploadFile('/fastdfsServer/fileUpload', element, 'file', {}, function(res) { //上传本地图片地址到服务器 返回地址 存放到input提交时取值
 res = JSON.parse(res);
 if (res.responseCode == 0) {
 sysMsg.sysMsg("上传成功", 1000, 'success');
 that.setData({
 allImg: that.data.allImg.concat(res.responseBody)
 });
 } else {
 sysMsg.sysMsg("上传失败", 1500, 'error');
 }
 });
 
 });
 // 文件上传的函数,返回一个promise
 return new Promise((resolve, reject) => {
 resolve({
 urls: files.tempFilePaths
 });
 setTimeout(() => {
 reject('some error')
 }, 10000)
 
 })
 
 },
 uploadError(e) {
 console.log('upload error', e.detail)
 },
 uploadSuccess(e) {
 // this.setData({
 // allImg: this.data.allImg.concat(e.detail.urls[0])
 // });
 console.log('upload success', e.detail, e.detail.urls)
 
},

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 Javascript
js中的preventDefault与stopPropagation详解
Jan 29 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
js数组常见操作及数组与字符串相互转化实例详解
Nov 10 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
Jun 06 Javascript
关于Vue.js一些问题和思考学习笔记(2)
Dec 02 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
VUE开发一个图片轮播的组件示例代码
Mar 06 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(一)
May 11 Javascript
Jquery Datatables的使用详解
Jan 30 jQuery
js模拟实现百度搜索
Jun 28 #Javascript
微信小程序地图实现展示线路
Jul 29 #Javascript
vuex实现购物车的增加减少移除
Jun 28 #Javascript
JavaScript实现Tab标签页切换的最简便方式(4种)
Jun 28 #Javascript
vuex实现购物车功能
Jun 28 #Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 #Javascript
详细分析Node.js 模块系统
Jun 28 #Javascript
You might like
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
smarty模板中使用get、post、request、cookies、session变量的方法
2014/04/24 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
php实现的zip文件内容比较类
2014/09/24 PHP
php 实现进制相互转换
2016/04/07 PHP
csdn 论坛技术区平均给分功能
2009/11/07 Javascript
基于jQuery的淡入淡出可自动切换的幻灯插件打包下载
2010/09/15 Javascript
不使用浏览器运行javascript代码的方法
2013/07/24 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
JavaScript实现在数组中查找不同顺序排列的字符串
2014/09/26 Javascript
11种ASP连接数据库的方法
2015/09/18 Javascript
JS实现简单的二维矩阵乘积运算
2016/01/26 Javascript
Vue.js每天必学之指令系统与自定义指令
2016/09/07 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
详解vue中axios的使用与封装
2019/03/20 Javascript
Layui 解决表格异步调用后台分页的问题
2019/10/26 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
2020/06/11 Javascript
element跨分页操作选择详解
2020/06/29 Javascript
vue监听键盘事件的相关总结
2021/01/29 Vue.js
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python实现按学生年龄排序的实际问题详解
2017/08/29 Python
numpy 计算两个数组重复程度的方法
2018/11/07 Python
Django使用中间件解决前后端同源策略问题
2019/09/02 Python
基于Python计算圆周率pi代码实例
2020/03/25 Python
django 利用Q对象与F对象进行查询的实现
2020/05/15 Python
python如何删除列为空的行
2020/07/17 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
文员个人求职自荐信
2013/09/21 职场文书
三字经教学反思
2014/04/26 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
文艺委员竞选稿
2015/11/19 职场文书
团支部书记竞选稿
2015/11/21 职场文书
redis 查看所有的key方式
2021/05/07 Redis
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python