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

前言:

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

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

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

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

代码是这样的:

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推荐:小程序开发教程。以上是如何实现小程序多图上传功能的细节。请多关注主机参考其他相关文章！

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

• 下面来说说小程序中页面传递参数的几种方式（微信小程序页面传递值）。
• 如何在小程序中实现下拉刷新和上拉加载功能？（附代码）（小程序的上拉加载触发器）
• 如何在小程序中创建页面二维码
• 如何通过applet vant组件将默认样式单元px转换为rpx（Vantui applet）
• 再来说说微信小程序中的生命周期（功能）（请谈谈小程序的生命周期功能？)

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