效果图

WXML

<view class="img-wrap"><view class="txt">上传图片</view><view class="imglist"><view class="item" wx:for="{{imgs}}" wx:key="item"><image src="{{item}}" alt=""></image><view class='delete' bindtap='deleteImg' data-index="{{index}}"><image src="../../../images/icon.png"></image></view></view><view class="last-item" wx:if="{{imgs.length >= 3 ? false : true}}" bindtap="bindUpload"><text class="sign">+</text></view></view>
</view>

JS

data: {imgs: [],count: 3
},
bindUpload: function (e) {switch (this.data.imgs.length) {case 0:this.data.count = 3breakcase 1:this.data.count = 2breakcase 2:this.data.count = 1break}var that = thiswx.chooseImage({count: that.data.count, // 默认3sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片var tempFilePaths = res.tempFilePathsfor (var i = 0; i < tempFilePaths.length; i++) {wx.uploadFile({url: 'https://graph.baidu.com/upload',filePath: tempFilePaths[i],name: "file",header: {"content-type": "multipart/form-data"},success: function (res) {if (res.statusCode == 200) {wx.showToast({title: "上传成功",icon: "none",duration: 1500})that.data.imgs.push(JSON.parse(res.data).data)that.setData({imgs: that.data.imgs})}},fail: function (err) {wx.showToast({title: "上传失败",icon: "none",duration: 2000})},complete: function (result) {console.log(result.errMsg)}})}}})
},
// 删除图片
deleteImg: function (e) {var that = thiswx.showModal({title: "提示",content: "是否删除",success: function (res) {if (res.confirm) {for (var i = 0; i < that.data.imgs.length; i++) {if (i == e.currentTarget.dataset.index) that.data.imgs.splice(i, 1)}that.setData({imgs: that.data.imgs})} else if (res.cancel) {console.log("用户点击取消")}}})
}

WXSS

.wrap {width: 100%;padding: 0 30rpx;box-sizing: border-box;
}
.wrap .img-wrap {font-size: 30rpx;color: #33373E;margin-bottom: 10rpx;
}
.wrap .img-wrap .txt {margin-bottom: 20rpx;
}
.wrap .img-wrap .imglist {display: flex;flex-wrap: wrap;
}
.wrap .img-wrap .imglist .item {width: 150rpx;height: 150rpx;margin-right: 22rpx;margin-bottom: 10rpx;position: relative;
}
.wrap .img-wrap .imglist .last-item {width: 150rpx;height: 150rpx;text-align: center;line-height: 146rpx;border: 2rpx dashed #8B97A9;box-sizing: border-box;
}
.wrap .img-wrap .imglist .item image {width: 100%;height: 100%;
}
.wrap .img-wrap .imglist .item .delete {width: 30rpx;height: 30rpx;position: absolute;top: -14rpx;right: -12rpx;
}

微信小程序实现上传图片功能相关推荐

微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
黯然微信小程序杂记（三）：微信小程序实现倒计时功能附讲解教学附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能附超详细注释附源码一.功能描述二.界面展示三.test.wxml代码四.test.js代码(注释很详细很易懂) CSDN私信我,有关微信 ...
微信小程序实战购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com ...
微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
微信小程序拼团功能页面展示
微信小程序拼团功能页面展示一.拼团功能拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
IVX低代码平台开发——微信小程序实现抽奖功能
写在前面通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录写在前面 iVX开发抽奖功能实现 iVX开发基本介绍 iVX是一个 "零代码&quo ...
微信小程序-001-抽签功能-006-我的抽签-主界面
微信小程序-001-抽签功能-006-我的抽签-主界面目录一.wxml 二.js pages.chouqian.setqian.setqian 一.wxml <view wx:for=&qu ...

微信小程序实现上传图片功能

效果图

WXML

JS

WXSS

微信小程序实现上传图片功能相关推荐

最新文章

热门文章