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


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 相关文章推荐
jQuery判断元素是否是隐藏的代码
Apr 24 Javascript
js实现动态改变字体大小代码
Jan 02 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
node.js中的http.get方法使用说明
Dec 14 Javascript
简单谈谈jQuery(function(){})与(function(){})(jQuery)
Dec 19 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
vue.js路由跳转详解
Aug 28 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
Mar 13 jQuery
微信公众号获取用户地理位置并列出附近的门店的示例代码
Jul 25 Javascript
es6 super关键字的理解与应用实例分析
Feb 15 Javascript
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
MySQL连接数超过限制的解决方法
2011/07/17 PHP
php打造属于自己的MVC框架
2012/03/07 PHP
深入理解PHP中的Streams工具
2015/07/03 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
JavaScript面象对象设计
2008/04/28 Javascript
node.js中的path.sep方法使用说明
2014/12/08 Javascript
Javascript实现div层渐隐效果的方法
2015/05/30 Javascript
js注入 黑客之路必备!
2016/09/14 Javascript
jquery实现自适应banner焦点图
2017/02/16 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
2017/03/04 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
2017/04/03 jQuery
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
老生常谈javascript的面向对象思想
2017/08/22 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
python静态方法实例
2015/01/14 Python
python如何去除字符串中不想要的字符
2020/07/05 Python
python五子棋游戏的设计与实现
2019/06/18 Python
python  logging日志打印过程解析
2019/10/22 Python
pytorch实现用CNN和LSTM对文本进行分类方式
2020/01/08 Python
树莓派升级python的具体步骤
2020/07/05 Python
Python调用百度OCR实现图片文字识别的示例代码
2020/07/17 Python
简单的命令查看安装的python版本号
2020/08/28 Python
python实现计算器简易版
2020/12/17 Python
Pureology官网:为染色头发打造最好的产品
2019/09/13 全球购物
高中生物教学反思
2014/02/05 职场文书
教师节促销方案
2014/03/22 职场文书
2014五一国际劳动节活动总结范文
2014/04/14 职场文书
2014年教师教学工作总结
2014/11/08 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
实习生个人总结范文
2015/02/28 职场文书
跳高加油稿
2015/07/21 职场文书
党员心得体会范文2016
2016/01/23 职场文书
《所见》教学反思
2016/02/23 职场文书
告别网页搜索!教你用python实现一款属于自己的翻译词典软件
2021/06/03 Python