VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动
华纳云最新优惠促销活动

如何实现小程序的多图上传功能(微信小程序一次上传多张图片)

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

如何实现小程序的多图上传功能(微信小程序一次上传多张图片)

前言:

我们知道小程序一次只能上传一张图片,那么如果想一次上传多张图片应该怎么做呢?

(学习视频分享:编程入门)

这里使用了递归。上传图像时,会重新执行该函数,直到所有图像都上传后,才会再次调用该函数。

首先,我们来看看两个API,wx.chooseImage(object)和wx.uploadFile(OBJECT)。

08a9687b70d97fb0985f9d1fe9d3c8a.png

5dca99673e8afa84d77feb36a29f2de.png

代码是这样的:

wx . choose image({ success:function(RES){ var tempfile paths = RES . tempfile paths wx . uploadfile({ URL: # 39;http://exle.weixin.qq.com/upload',//仅举例,虚幻接口地址filepath: tempfilepaths [0],name: # 39;文件 # 39;,表单数据:{ # 39;用户 # 39;: '测试 # 39;}、success:function(RES){ var data = res.data//dosomething}}})这里的示例代码是选中一张图片,然后上传选中图片的第一张;

现在开始写上传多张图片的例子。

首先还是要选图。

wx . choose image({ success:function(RES){ var tempfile paths = RES . tempfile paths;//这里是选中图片的地址,是一个数组}})然后在app.js里面写一个多张图片上传的方法,后面介绍。您也可以将它写在JS文件中,稍后再介绍它:

//上传多张图片到函数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: # 39;文件 # 39;,//在这里,根据你的实际情况,更改formData:null,//即可。//下面是上传图片时一起上传的数据。成功:(resp)= gt;{ success++;//图片上传成功,图片上传成功的变量+1 console . log(resp)console . log(I);//这里可能有BUG,失败了就执行,所以应该是后台返回的状态码为成功时,这里的成功只有+1},fail:(RES)= >;{ fail++;//镜像上传失败,镜像上传失败的变量+1 console . log( # 39;失败: # 39;+I+ ;失败: +不及格);},完成:()= gt{ console.log(一);i++;//上传完这张图,开始上传下一张if(i==data.path.length){ //当这张图完成后,停止调用console . log( # 39;完了 # 39;);console . log( # 39;成功: # 39;+成功+ ;失败:“+失败);}else{//如果图片没有看完,继续调用函数console . log(I);data.i = idata.success =成功;data.fail =失败;that.uploadimg(数据);} } });}上传多张图片的方法已经写好了。这是他的原话:

var app = getApp();Page ({data: {pics: []},choose:function(){//下面是选择图片的方法var that = this,pics = this . data . pics;wx . choose image({ count:9-pics . length,//可以选择的最大图片数,默认为9 size type:[ # 39;原创 # 39;, '压缩 # 39;],//原始原始图像,压缩压缩图像,两者默认都有源类型:[ # 39;相册 # 39;, '相机 # 39;],//相册从相册中选择图片,相机使用相机。默认两者都有success:function(RES){ var img src = RES . tempfile paths;pics = pics . concat(img src);that . setdata({ pics:pics });},fail: function () {//fail},complete:function(){//complete } },upload img:function(){//这里,触发图片上传的方法var pics = this . data . pics;app . upload img({ URL: # 39;https://........',//这里是上传你的图片的界面路径:pics//这里是选中图片的地址数组});},onLoad:function(options){ }})刚写了一个节点上传图片代码,亲测可以用,

或者

一个简单的PHP接收代码:

lt马鞭PHP $ img name = $ _ FILES[ # 39;文件 # 39;]['姓名 # 39;];$ tmp = $ _ FILES[ # 39;文件 # 39;]['tmp _ name # 39];$ filepath = # 39现在/ # 39;;//如果(move _ uploaded _ file ($ tmp,$ filepath)的话记得创建这个文件夹。$ imgname。" .png )){ echo 上传成功”;} else { echo 上传失败";} ? gt推荐:小程序开发教程。以上是如何实现小程序多图上传功能的细节。请多关注主机参考其他相关文章!

这几篇文章你可能也喜欢:

本文由主机参考刊发,转载请注明:如何实现小程序的多图上传功能(微信小程序一次上传多张图片) https://zhujicankao.com/80311.html

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 如何实现小程序的多图上传功能(微信小程序一次上传多张图片)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!