如何实现小程序的多图上传功能（小程序实现上传图片）

前言:

我们知道小程序一次只能上传一张图片，那么如果想一次上传多张图片该怎么办呢？

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

这里使用了递归。当一张图片上传后，再次执行该函数，直到所有图片上传后才再次调用该函数。

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

示例代码如下所示:

wx . choose image({ success:function(RES){ var tempfile paths = RES . tempfile paths wx . uploadfile({ URL:& amp；#39;http://example.weixin.qq.com/upload&第39名；//仅举例，虚幻接口地址为filepath: tempfilepaths [0]，name:&；#39;文件& amp#39;，formData:{ & amp；#39;用户& amp#39;:& amp#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文件中，稍后再介绍它:

//上传多张图片到函数upload img (data) {var that = this，I = data.i？Data.i: 0。//目前上传的是哪张图片？成功=数据。成功？Data.success:0，//上传成功次数fail=data.fail？data . fail:0；//上传失败次数wx.uploadfile ({URL: data.url，filepath: data.path [i]，name:&；#39;文件& amp#39;，//更改formData:null，//这里根据你的实际情况，//这里是上传图片时一起上传的数据。成功:(resp)= & gt；{ success++；//图片上传成功，图片的变量+1 console . log(resp)console . log(I)上传成功；//这里可能有BUG，失败就执行，所以应该是后台返回的状态码为成功时，这里的成功只有+1}，fail:(RES)= > { fail++；//图片上传失败，variable+1 console . log(&；#39;失败:#39;+I+& quot；失败:& quot+不及格)；}，完成:()= & gt{ console.log(一)；i++；//这张图片上传后，开始上传下一张if(i==data.path.length){ //图片上传完毕，停止调用console . log(&；#39;执行完毕& amp；#39;);console . log(& amp；#39;成功:amp # 39+成功+& quot；失败:“+失败)；}else{//如果图片还没有通过，继续调用函数console . log(I)；data.i = idata.success =成功；data.fail =失败；that.uploadimg(数据)；} } });}上传多张图的方法写好了，以下是引用:

var app = getApp()；Page ({data: {pics: []}，choose:function(){//下面是选择一个图片that = this，pics = this.data.pics的方法；wx . choose image({ count:9-pics . length，//可以选择的最大图片数，默认9大小类型:[&；#39;原创& amp#39;，& amp#39;压缩& amp#39;]，//原始原始图像，压缩压缩图像，两者默认都有源类型:[&；#39;专辑& amp#39;，& amp#39;照相机和照相机。#39;]，//相册从相册中选择图片，相机使用相机。默认情况下，两者都成功: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:& amp；#39;https://........& amp#39;//这里是上传你的图片路径的界面:pics//这里是选中图片的地址数组})；}，onLoad:function(options){ }})刚刚写了一个按节点上传图片的代码，可以用来亲测。

或者

一个简单的PHP接收代码:

& lt？PHP $ imgname = $ _ FILES[& amp；#39;文件& amp#39;][& amp；#39;姓名和名称。#39;];$ tmp = $ _ FILES[& amp；#39;文件& amp#39;][& amp；#39;tmp _ name & amp#39;];$ filepath = & amp#39;现在/& amp；#39;；//如果($ tmp，$ filepath)的话记得创建这个文件夹。$ imgname。" .png & quot)){ echo & quot上传成功”；} else { echo & quot上传失败"；} ?& gt相关推荐:小程序开发教程

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

• 小程序开发的具体流程是什么（小程序开发入门教程）
• 小程序调用百度云接口实现人脸识别（人脸识别小程序百度云下载）
• 微信小程序开发需要掌握哪些技术（微信小程序开发需要哪些技能）？
• 如何将外部css引入小程序(如何将外部js引入微信小程序)
• 小程序开发的难点是什么（开发小程序难吗）

本文由主机参考刊发，转载请注明：如何实现小程序的多图上传功能（小程序实现上传图片） https://zhujicankao.com/115347.html