小程序如何实现多图上传、图片预览效果？（代码示例）（微信小程序开发上传图片）

小程序如何实现多图上传、图片预览效果？（代码示例）（微信小程序开发上传图片）

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

wxml代码：

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文件中，后面引入：

//多张图片上传 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++;//图片上传失败，图片上传失败的变量+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); } } }); }-

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

总结：以上就是本篇文章的全部内容，希望能对大家的学习有所帮助。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。