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

这篇文章主要为大家详细介绍了微信小程序实现上传图片的功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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>

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;
}

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

开发微信小程序实现上传图片拍照功能
wxml代码: //给button添加点击事件 <button bindtap="doUpload"></button> js代码 doUpload(){/ ...
微信小程序原生上传图片封装
资源参考组件免费下载地址概述微信小程序原生上传图片功能封装,具体使用根据个人情况而定. 组件自定义属性与方法描述 isShow:布尔值,默认为true true:不显示上传图标 false:显示 ...
微信小程序拍照打卡功能实现
微信小程序拍照打卡功能实现附Java代码小程序端签到页面wxml 签到页面js 拍照页面wxml 拍照页面js Java后台保存照片保存打卡数据由于拍照组件是相当于一个块,用隐藏显示的方 ...
nodejs android 推送,利用Nodejs怎么实现一个微信小程序消息推送功能
利用Nodejs怎么实现一个微信小程序消息推送功能发布时间:2021-01-20 13:55:29 来源:亿速云阅读:92 作者:Leah 今天就跟大家聊聊有关利用Nodejs怎么实现一个微信小程 ...
php 微信小程序循环多选,微信小程序实现多选功能
本文为大家分享了微信小程序实现多选功能的具体代码,供大家参考,具体内容如下代码: {{num + 1}}/{{quesyion.length}}{{question[num][0]}} A {{qu ...
如何实现消息功能_如何实现微信小程序的轮盘抽奖功能
为了吸引用户,商家会做一些活动,利用赠送或充值的积分来进行抽奖,现在来讲下微信小程序如果实现轮盘抽奖的功能,先看下图: 上面展示的就是轮盘抽奖,一共有六个奖项,其中一个是"不中奖" ...
微信小程序可以实现很多功能
微信小程序可以实现很多功能,今天就教大家如何利用小程序插件来实现这些功能: 1.直播你可以在「上线了」选择一个电商(或超级云名片-电商版)小程序模板,在"应用中心"里添加小程序 ...
微信聊天自动解析html文本,微信小程序纯文本实现@功能
前言大家肯定对@功能不陌生,在如今的各大社交软件中它是一种不可或缺的功能.实现@人的功能并不复杂,只需将@人员的id传给后端,后端下发通知即可.主要的复杂点在于一键删除功能与变色功能,web端可以使 ...
借鉴华为HiLink实现微信小程序智能配网功能
借鉴华为HiLink实现微信小程序智能配网功能微信小程序介绍微信公众号智能配网 Smartconfig实现原理 Smartconfig技术的弊端 AP配网技术的出现微信小程序智能配网模块端设置 ...
微信小程序实现替换logo功能
1.背景产品觉得用公司logo生成的的二维码太丑觉得橘黄色和黑色不搭配,希望替换logo,在此之前,我也是没有做过这个功能的,于是我查阅了大量资料.加上自己的代码,实现了这个功能.实现的效果如下 ...

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

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

最新文章

热门文章