泰宁新闻网

小程序上传多张图片,微信小程序实现图片上传

鞋

泰宁新闻网 http://www.tainingxinwen.cn 2020-07-01 09:10 出处:网络
小程序上传多张图片,微信小程序实现图片上传,小程序上传多张图片 一:textarea组件层级过高导致文字穿透浮层问题。

小程序上传多张图片,微信小程序实现图片上传,小程序上传多张图片

一:textarea组件层级过高导致文字穿透浮层问题。

项目需求:最近做的一个小程序需求,其中一个页面使用到了 textarea 这个小程序组件,然后点击页面上的某个元素,会触发页面弹起一个弹窗,这时发现 textarea 的 placeholder文字或者输入的文字内容,会直接穿透遮罩层和浮动弹窗,显示在最上面。第一反应以为是层叠级问题。所以疯狂给弹框的 z-index 属性往上加。但无济于事。于是改变思路:

利用 wx:if 当显示弹框的时候,把 textarea 隐藏;弹框关闭的时候,显示textarea。(这个方法比较暴力直接,治标不治本,若有更好的解决方案可以告知)。

二:上传多张图片

项目需求:用户最多可以上传6张图片,如果上传错误可以单张删除,上传成功可以预览照片。效果图如下:

小程序上传多张图片,微信小程序实现图片上传

首先在微信公众平台配置好uploadFile合法域名。

界面的WXML代码大致如下所示:

 view 
 view 
 !-- 根据已选择的图片临时路径数组展示图片-- 
 view wx:for="{{uploaderList}}" wx:key="{{index}}" 
 !-- 删除-- 
 icon bindtap='clearImg' data-index="{{index}}" type="clear" size="20" color="red"/ 
 !-- 图片-- 
 image bindtap='showImg' data-index="{{index}}" src='{{item}}' /image 
 /view 
 !-- 上传按钮+框 -- 
 view wx:if="{{showUpload}}" 
 image bindtap='upload' src="/images/timg.png" /image 
 /view 
 /view 
 /view 

与此对应的js代码如下:

Page({
 data: {
 id:'', //上传时后端返回的图片ID,拼接后存入
 joinString:'', 
 uploaderList: [], //保存上传图片url的数组
 uploaderNum: 0, //已经上传的图片数目
 showUpload: true, //控制上传框的显隐
//上传图片
 upload: function (e) {
 var that = this;
//选择图片
 wx.chooseImage({
 count: 6 - that.data.uploaderNum, // 默认6
 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
 success: function (res) {
 // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
 that.data.uploaderList.concat(res.tempFilePaths);
 var uploaderList = res.tempFilePaths;
 that.setData({
 uploaderList: that.data.uploaderList.concat(res.tempFilePaths),
 that.setData({
 uploaderNum: that.data.uploaderList.length
 if (uploaderList.length == 6) {
 that.setData({
 showUpload:false
 console.log(that.showUpload)
 for (var i = 0; i uploaderList.length; i++) {
 wx.uploadFile({
 url: 'xxxxx',
 filePath: uploaderList[i],
 name: 'files',
 formData: {
 files: uploaderList,
 success: function (res) {
 var id = JSON.parse(res.data).data.attId
that.setData({ id: that.data.id + `${id},`, joinString: (that.data.id + `${id},`).slice(0, -1) })
} })

删除图片、展示图片逻辑如下:

 //展示图片
 showImg: function (e) {
 var that = this;
 wx.previewImage({
 urls: that.data.uploaderList,
 current: that.data.uploaderList[e.currentTarget.dataset.index]
 // 删除图片
 clearImg: function (e) {
 var that = this
 var nowList = [];//新数据
 var uploaderList = that.data.uploaderList;//原数据
 for (let i = 0; i uploaderList.length; i++) {
 if (i == e.currentTarget.dataset.index) {
 var arr = that.data.joinString.split(',')
 arr.splice(i, 1); //删除图片的同时删除掉其对应的ID
 var newArr = arr.join(',')
 that.setData({
 joinString:newArr,
 id:newArr+','
 } else {
 nowList.push(uploaderList[i])
 this.setData({
 uploaderNum: this.data.uploaderNum - 1,
 uploaderList: nowList,
 showUpload: true,
 },

之后就是随着表单信息把图片ID一块提交了,注意:在提交完成之后记得将data中的uploadList、uploadNum、Id、joinString清空哦!否则再次提交表单的时候会出现上传图片的bug哦!

 

小程序上传多张图片的相关网页热门搜索词

微信小程序实现图片上传|小程序怎么添加9张以上图片|小程序批量上传图片|小程序怎么添加图片|小程序表单和多张图片|小程序上传多张图片经常丢失|微信小程序多图上传|小程序多图片显示|搞都张相片小程序|

本文标题:小程序上传多张图片,微信小程序实现图片上传
http://www.tainingxinwen.cn/qitaxinxi/409392.html

0

精彩评论

暂无评论...
验证码 换一张
取 消