全网整合营销服务商

营销型网站+SEO优化+关键词快排=一站式服务

免费咨询热线:15959292472

[南通seo公司网站]小程序如何实现多图上传、图片预览效果?(代码示例)

  本篇文章给大家带来的内容是介绍小程序如何实现多图上传、图片预览效果?(代码示例) 。有一定的参考价值,有需要的朋友可以参考一下=◇◁,希望对你们有所帮助。

  wxml代码★…:

  

 <view class="weui-cell"=▼•;> <view class="weui-cell__bd">
 <view class="weui-uploader"-=;>□◁◁;
 <view class="weui-uploader__hd"◆▽•;>
 <△★▲□;view class="=○;weui-uploader__title"▽▼•;>点击可预览选好的图片<△▲;/view>□•;
 <▽▷▪;view class="weui-uploader__info">{{pics.length}}/9</view>☆▼★;
 <…▲△;/view>
 <••□▽;view class="weui-uploader__bd">
 <•▪■★;view class="◇▪◇;weui-uploader__files"☆▷△;>
 <-☆▽◆;block wx:for="{{pics}}" wx:for-item="image">
 <◇-☆;view class="weui-uploader__file"◁•;>
 <image class="▲◆□…;weui-uploader__img" src="{{image}}" src="{{image}}" bindtap="previewImage">•▷◆-;<=★=;/image>■▲;
 </view>
 </block>
 <◁○;/view>◆■▪;<view class="delete-btn" data-index="{{index}}" catchtap="★▼;deleteImg"=△▼;></view>
 <!-- isShow 这个是判断是否进行触发点隐藏操作 -->
 <view class="weui-uploader__input-box {{isShow•▷?'○▪▽▲;true':'hideTrue'}}">
 <★-○…;view class="weui-uploader__input" bindtap="chooseImage"◁-;></view>
 </view>
 </view>…◆▷★;
 </view>
 <■◁●;/view><•▷;/view>

 

  wxss代码:

  

page {
 line-height: 1.6;
 font-family: -apple-system-font, "Helvetica Neue"…-…□;-•◇, sans-serif;
}
icon {
 vertical-align◆■△: middle;
}
-▪.weui-cell {
 padding: 10px 15px;
 position: relative;
 display: -webkit-box;
 display: -webkit-flex-◁▷◆;
 display: flex;
 align-items: center…▽;
}
.weui-cell_input {
 padding-top: 0;
 padding-bottom▽◁: 0-▪☆•;
}
•☆◇•.weui-uploader__hd {
 display☆-▪●: -webkit-box;
 display: -webkit-flex;
 display: flex;
 padding-bottom: 10px;
 align-items: center○△==;
}
.weui-uploader__title {
 flex-▪: 1◇○;
}
•-◁.weui-uploader__info {
 color: #b2b2b2●◆;
}
▼○.weui-uploader__bd {
 margin-bottom: -4px◆-●□;
 margin-right: -9px;
 overflow: hidden▼▼;
}
○★•○.weui-uploader__file {
 float: left;
 margin-right★★: 9px●▪;
 margin-bottom: 9px;
}
.weui-uploader__img {
 display=-☆-: block;
 width: 79px◇▲;
 height: 79px;
}
.weui-uploader__input-box {
 float: left;
 position: relative;
 margin-right: 9px▲•;
 margin-bottom: 9px;
 width: 77px;
 height☆▷…: 77px;
 border▼◁: 1px solid #d9d9d9;
}
○■.weui-uploader__input-box:before◁•, .weui-uploader__input-box:after {
 content: " "•••-;;
 position: absolute;
 top: 50%□…;
 left: 50%▲▼•◁;
 transform: translate(-50%, -50%);
 background-color: #d9d9d9;
}
△☆=★.weui-uploader__input-box:before {
 width▲▼: 2px;
 height: 39▼•.5px■▪△◇;
}
.weui-uploader__input-box●▲:after {
 width: 39◁….5px;
 height: 2px;
}
.weui-uploader__input {
 position: absolute-◇○•;
 z-index▷★◇: 1●▲;
 top: 0;
 left: 0•▪;
 width: 100%★●;
 height◇★: 100%★★=★;
 opacity●▼□☆: 0;
}
.hideTrue {
 display◆▽◇: none
}

 

  js代码▼▽○:

  

var app = getApp()=○;
Page({
 data: {
 pics: []☆◁,
 count: [1, 2, 3, 4, 5, 6▷-•, 7, 8▷…◇, 9]•▪●◇,
 isShow●△◆•: true
 },
 onLoad: function (options) {
 // 生命周期函数--监听页面加载
 isShow◇●▲: (options▽▷.isShow == "◁●;true" ? true : false)
 },
 // 图片上传
 chooseImage○•■: function () {
 var _this = this,
 pics = this.data.pics;
 wx■○★.chooseImage({
 count☆▲: 9 - pics★□▽.length▷◁, // 最多可以选择的图片张数,默认9
 sizeType: ['▽◁□□;original'◆-◆;•-•◇, 'compressed']▪▲, // original 原图•■,compressed 压缩图,默认二者都有
 sourceType: ['album'=…;, 'camera']▲▪▽-, // album 从相册选图…◁◆,camera 使用相机•●▲…,默认二者都有
 success: function (res) {
 // success
 var imgSrc = res.tempFilePaths; //图片路径
 pics = pics.concat(imgSrc); //选取的图片的地址数组
 // 控制触发添加图片的最多时隐藏
 if (pics.length >△●;= 9) {
 _this.setData({
 isShow: (!_this.data…○▼●.isShow)
 })
 } else {
 _this▼=.setData({
 isShow: (_this△●.data.isShow)
 })
 }
 _this=□★.setData({
 pics: pics
 })
 },
 fail: function () {
 // fail
 },
 complete▽☆-: function () {
 // complete
 }
 })
 }■▪,
 // 图片预览
 previewImage: function (e) {
 var current = e.target▲▽△☆.dataset.src
 wx.previewImage({
 current: current,
 urls: this☆•▽◁.data.pics
 })
 }
 // 删除图片
 deleteImg: function (e) {
 var imgs = this.data.imgs;
 var index = e-▽□.currentTarget.dataset●▽.index▽…▲▷;
 imgs.splice(index, 1)□□▽▽;
 this.setData({
 imgs: imgs
 });
 }•●○,
uploadimg:function(){//这里触发图片上传的方法
 var pics=this.data…▷▪◆.pics▼◆;
 app△•★.uploadimg({
 url:'◆•☆◇;https://.•☆.☆•=■.△•.•◁.☆-.▷=•△.■▲.'△●-;★○◇,//这里是你图片上传的接口
 path□▲◆•:pics//这里是选取的图片的地址数组
 })▪▼★○;
 },
})

 

  在app▼△•.js中写一个多张图片上传的方法,后面引入,你也可以写在一个JS文件中,[南通seo公司网站]后面引入:

  

//多张图片上传
 function uploadimg(data){
 var that=this,
 i=data.i?data-■△.i○=★-:0,//当前上传的哪张图片
 success=data.success○■?data.success:0,//上传成功的个数
 fail=data.fail?data.fail:0;//上传失败的个数
 wx.uploadFile({
 url○▷-: data.url, 
 filePath: data.path[i],
 name▪▽•: 'file'•…•;,//这里根据自己的实际情况改
 formData△★:null,//这里是上传图片时一起上传的数据
 success★△-: (resp) => {
 success++□△▷;//图片上传成功▼■,图片上传成功的变量+1
 console.log(resp)
 console★◇-.log(i);
 //这里可能有BUG,张家港市小程序制作公司失败也会执行这里,所以这里应该是后台返回过来的状态码为成功时,这里的success才+1
 },
 fail◁☆-…: (res) =>☆■; {
 fail++•☆★;//图片上传失败,19
										2020.10
									
									
								
								
									[三门峡seo公司立荐久澳]微信小程序Page构造函数以及生命周期函数的内容解
									
										本篇文章给大家带来的内容是关于微信小程序Page构造函数以及生命周期函数的内容解析(附代码),有一定的参考价值, 庆阳市小程序制作公司 有需要的朋友可以参考一下▷◆,希望图片上传失败的变量+1
 console△▪=.log('=★●;fail:'+i+"fail:"●•▪;+fail);
 }△▪,
 complete: () =>☆◇; {
 console.log(i);
 i++▼▲◁◇;//这个图片执行完上传后,开始上传下一张
 if(i==data▷◁.path▽▪●◆.length){ //当图片传完时,灯塔市小程序制作公司停止调用 
 console▽•◆.log('执行完毕');
 console.log('成功:'+success+" 失败:"+fail);
 }else{//若图片还没有传完▽▪▷●,则继续调用函数
 console◁◁△-.log(i)▽▪;
 data-◁…△.i=i☆■■▷;
 data◆△■○.success=success……●☆;
 data.fail=fail;
 that.uploadimg(data)•□;
 }

 }
 });
 }

 

  效果图,邳州市小程序开发哪家好可点击放大预览:

  

 

  总结☆••:以上就是本篇文章的全部内容,希望能对大家的学习有所帮助★◁□。

  以上就是小程序如何实现多图上传、图片预览效果?(代码示例)的详细内容,更多请关注久澳传媒编程栏目其它相关文章!

[南通seo公司网站]小程序如何实现多图上传、图片预览效果?(代码示例)

您的项目需求

*请认真填写需求信息,我们会在24小时内与您取得联系。