微信小程序多张图片上传功能
网络编程 2021-07-04 18:32www.168986.cn编程入门
这篇文章主要为大家详细介绍了微信小程序实现多张图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办?
这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片都上传完成后,就不再调用该函数。
,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api
示例代码是这样的
wx.chooseImage({ suess: function(res) { var tempFilePaths = res.tempFilePaths wx.uploadFile({ url: 'http://example.weixin.qq./upload', //仅为示例,非真实的接口地址 filePath: tempFilePaths[0], name: 'file', formData:{ 'user': 'test' }, suess: function(res){ var data = res.data //do something } }) } })
这里的示例代码,是选择图片,然后上传选中的图片中的第一个图片;
现在开始写多张图片上传的例子
,我们还是要选择图片
wx.chooseImage({ suess: function(res) { var tempFilePaths = res.tempFilePaths;//这里是选好的图片的地址,是一个数组 } })
然后在app.js中写一个多张图片上传的方法,后面引入,你也可以写在一个JS文件中,后面引入
//多张图片上传 function uploadimg(data){ var that=this, i=data.i?data.i:0, suess=data.suess?data.suess:0, fail=data.fail?data.fail:0; wx.uploadFile({ url: data.url, filePath: data.path[i], name: 'fileData', formData:null, suess: (resp) => { suess++; console.log(resp) console.log(i); //这里可能有BUG,失败也会执行这里 }, fail: (res) => { fail++; console.log('fail:'+i+"fail:"+fail); }, plete: () => { console.log(i); i++; if(i==data.path.length){ //当图片传完时,停止调用 console.log('执行完毕'); console.log('成功'+suess+" 失败"+fail); }else{//若图片还没有传完,则继续调用函数 console.log(i); data.i=i; data.suess=suess; data.fail=fail; that.uploadimg(data); } } }); }
多张图片上传的方法写好了,狼蚁网站SEO优化就是引用
var app=getApp(); Page({ data:{ pics:[] }, choose:function(){//这里是选取图片的方法 var that=this; wx.chooseImage({ count: 9-pic.length, // 最多可以选择的图片张数,默认9 sizeType: ['original', 'pressed'], // original 原图,pressed 压缩图,默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有 suess: function(res){ var imgsrc=res.tempFilePaths; that.setData({ pics:imgsrc }); }, fail: function() { // fail }, plete: function() { // plete } }) }, uploadimg:function(){//这里触发图片上传的方法 var pics=this.data.pics; app.uploadimg({ url:'https://........',//这里是你图片上传的接口 path:pics//这里是选取的图片的地址数组 }); }, onLoad:function(options){ } })
刚好写了一个代码,亲测可以使用,
或
一个简单的PHP接收代码
<?php $imgname = $_FILES['file']['name']; $tmp = $_FILES['file']['tmp_name']; $filepath = 'now/';//记得要自己创建这个文件夹 if(move_uploaded_file($tmp,$filepath.$imgname.".png")){ echo "上传成功"; }else{ echo "上传失败"; } ?>
完结。
为大家推荐现在关注度比较高的微信小程序教程一篇长沙网络推广为大家精心整理的,希望喜欢。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
上一篇:详解vee-validate的使用个人小结
下一篇:Vue.js对象转换实例
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程