微信小程序（上传照片功能、统计字数功能）

微信小程序仿淘宝申请界面中的“申请描述”
效果图：（上传照片功能、统计字数功能）

.wxml :

<view class="apply-describe"><view class="apply-des"><text class="describe-title">申请描述</text><text class="describe-text">还可以输入{{200-currentWordNumber|0}}字</text></view><view class='ui_uploader_cell'><view class="cu-bar"><textarea maxlength="-1" maxlength="200" disabled="{{modalName!=null}}" bindinput="textareaAInput" placeholder="请您详细描述具体原因"></textarea></view><view class='ui_uploader_item' wx:for="{{uploaderList}}" wx:key="index"><icon class='ui_uploader_item_icon' bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/><image bindtap='showImg' data-index="{{index}}" src='{{item}}'></image></view><view class='ui_uploader' bindtap='upload' wx:if="{{showUpload}}"><image class="ui_uploder_photo" src="../../imgs/photo.png"></image><text class="ui_uploder_text">上传图片最多3张</text></view></view></view>

.wxss :

.apply-describe{width: 94%;height: 500rpx;margin-left: 20rpx;margin-top: 50rpx;background-color: rgb(234, 247, 199);border-radius: 10px 10px 10px 10px;}.apply-describe .apply-des{height: 90rpx;margin-top: 20rpx;line-height:90rpx ;}.apply-describe .apply-des .describe-title{font-size: 34rpx;margin-left: 29rpx;font-weight: bold;}.apply-describe .apply-des .describe-text{font-size: 25rpx;color: gray;margin-left: 330rpx;}.apply-describe .ui_uploader_cell {width: 93%;height: 370rpx;padding: 40rpx;margin-left: 24rpx;box-sizing: border-box;background-color: rgb(217, 238, 159);border-radius: 10px 10px 10px 10px;}.apply-describe .ui_uploader_cell .cu-bar textarea{height: 160rpx;width: 100%;font-size: 28rpx;margin-bottom: 30rpx;}.apply-describe .ui_uploader_cell .ui_uploader_item{float: left;position: relative;margin-right: 30rpx;margin-bottom: 30rpx;width: 120rpx;height: 120rpx;}.apply-describe .ui_uploader_cell .ui_uploader_item .ui_uploader_item_icon{position: absolute;right: -20rpx;top: -20rpx;background: #fff;border-radius: 50%;}.apply-describe .ui_uploader_cell .ui_uploader_item image {width: 90%;height: 90%;}.apply-describe .ui_uploader_cell .ui_uploader {/* float: left; *//* position: relative; */margin-right: 25rpx;margin-bottom: 25rpx;width: 120rpx;height: 120rpx;border: 2rpx dotted gray;border-radius: 10rpx;box-sizing: border-box;display: flex;flex-direction: column;justify-content: center;}.apply-describe .ui_uploader_cell .ui_uploader .ui_uploder_photo{width: 55rpx;height: 55rpx;margin-left: 30rpx;}.apply-describe .ui_uploader_cell .ui_uploader .ui_uploder_text{font-size: 20rpx;margin-left: 10rpx;margin-right: 10rpx;color: gray;}

.js :

Page({/*** 页面的初始数据*/data: {uploaderList: [],uploaderNum:0,showUpload:true},onLoad: function (options) { },// 删除图片clearImg:function(e){console.log(e);var nowList = [];//新数据var uploaderList = this.data.uploaderList;//原数据for (let i = 0; i < uploaderList.length;i++){if (i == e.currentTarget.dataset.index){continue;}else{nowList.push(uploaderList[i])}}this.setData({uploaderNum: this.data.uploaderNum - 1,uploaderList: nowList,showUpload: true})
},
//展示图片
showImg:function(e){var that=this;wx.previewImage({urls: that.data.uploaderList,current: that.data.uploaderList[e.currentTarget.dataset.index]})
},
//上传图片
upload: function(e) {var that = this;wx.chooseImage({count:3 - that.data.uploaderNum, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {console.log(res)// 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片let tempFilePaths = res.tempFilePaths;let uploaderList = that.data.uploaderList.concat(tempFilePaths);if (uploaderList.length==3){that.setData({showUpload:false})}that.setData({uploaderList: uploaderList,uploaderNum: uploaderList.length,})}})
},
textareaAInput(e) {let value=e.detail.value;let len=parseInt(value.length);if(len>200) return;this.setData({currentWordNumber: len //当前字数 });this.setData({textareaAValue: e.detail.value})
}  })

微信小程序（上传照片功能、统计字数功能）相关推荐

微信小程序上传Excel文本文件功能
问题: 在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只 ...
小程序 php转excel,做微信小程序上传数据数据格式？-微信上传数据生成excle
做微信小程序上传数据数据格式? 建议找人专门制作设计好,专业的事情交给专业的人做,自己浪费时间还不一定能搞好如何把微信里的excel传到qq上 1.在手机中先箭头所示的"微信" ...
《微信小程序-证件照换底色》之二：用pycharm搭建django框架来接收微信小程序上传的图片
用pycharm搭建django框架来接收微信小程序的图片上一篇:微信云开发实现每个用户在云端上传并且下载自己对应的图片链接: https://blog.csdn.net/qq_44933075/ ...
微信小程序上传阿里云视频文件流程及代码
为了微信小程序客服端实现自拍视频能够分享给多个好友,我们需要把小程序自拍的视频存储到服务器,而阿里云在性能和速度上比较不错,所以我们选择了阿里云作服务器. 第一步.微信小程序项目创建 1. 到http ...
微信小程序上传组件（可同时长传图片+视频）
写了个微信小程序上传组件,同时支持上传视频+图片,并且可以返显. 废话不多说,上代码: upload.wxml <view class="clearfix"><v ...
微信小程序上传头像和昵称持久化保存
微信小程序上传头像和昵称持久化保存 1. 持久化步骤因为通过微信头像昵称填写功能获取到头像是一个临时头像,这个url只能一段时间内在微信访问,并且无法在公网访问这个url.所以非常有必要把这个url ...
微信小程序上传多张图片，上传文件pdf等
wx.getFileSystemManager().readFileSync同步循环数组是可以拿到值的 wx.getFileSystemManager().readFile异步,但是加了这个就一直是空 ...
微信小程序上传文件组件
微信小程序上传文件一.说明该拍照组件带有微信授权相机功能,会结合后端接口,将上传的图片以数组集合的形式传值给父级页面. 注意:组件适用于,单独上传图片,不携带参数,结合后端接口返回路径之后,再调用 ...
uni-app uni-file-picker文件上传实现拍摄从相册选择获取图片上传文档服务器（H5上传-微信小程序上传）
前言最近在使用uni-app写H5移动端,有一个从手机拍摄从相册选择获取图片上传到文档服务器功能. 查阅uni-app发现关于上传图片,uni-file-picker文件上传,uni.chooseI ...
微信小程序上传文件到阿里OSS教程
前言 (一)开通OSS服务与新建Bucket 开通OSS服务这里省略,新建bucket. (二)设置Bucket属性,后台配置域名上传文件访问域名这里我们要在小程序后台配置上传域名(上面的域名是我 ...

微信小程序（上传照片功能、统计字数功能）

微信小程序（上传照片功能、统计字数功能）相关推荐

最新文章

热门文章