微信小程序多张图片上传功能

 更新时间:2017年06月07日 14:18:27   作者:西江无月  
这篇文章主要为大家详细介绍了微信小程序实现多张图片上传功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办?

这里使用递归,当上传完一张图片后重新执行这个函数,直到所有的图片都上传完成后,就不再调用该函数。

首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api

 示例代码是这样的:

wx.chooseImage({
 success: function(res) {
 var tempFilePaths = res.tempFilePaths
 wx.uploadFile({
 url: 'http://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
 filePath: tempFilePaths[0],
 name: 'file',
 formData:{
 'user': 'test'
 },
 success: function(res){
 var data = res.data
 //do something
 }
 })
 }
})

这里的示例代码,是选择图片,然后上传选中的图片中的第一个图片;

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

首先,我们还是要选择图片 

wx.chooseImage({
 success: function(res) {
 var tempFilePaths = res.tempFilePaths;//这里是选好的图片的地址,是一个数组
 
 }
})

然后在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: 'fileData',
 formData:null,
 success: (resp) => {
 success++;
 console.log(resp)
 console.log(i);
 //这里可能有BUG,失败也会执行这里
 },
 fail: (res) => {
 fail++;
 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);
 }
 
 }
 });
 }

多张图片上传的方法写好了,下面就是引用:

var app=getApp();
Page({
 data:{
 pics:[]
 },
 choose:function(){//这里是选取图片的方法
 var that=this;
 wx.chooseImage({
 count: 9-pic.length, // 最多可以选择的图片张数,默认9
 sizeType: ['original', 'compressed'], // original 原图,compressed 压缩图,默认二者都有
 sourceType: ['album', 'camera'], // album 从相册选图,camera 使用相机,默认二者都有
 success: function(res){
 var imgsrc=res.tempFilePaths; 
 that.setData({
 pics:imgsrc
 });
 },
 fail: function() {
 // fail
 },
 complete: function() {
 // complete
 }
 })

 },
 uploadimg:function(){//这里触发图片上传的方法
 var pics=this.data.pics;
 app.uploadimg({
 url:'https://........',//这里是你图片上传的接口
 path:pics//这里是选取的图片的地址数组
 });
 },
 onLoad:function(options){

 }

})

刚好写了一个node上传图片代码,亲测可以使用,

一个简单的PHP接收代码:

<?php 
 $imgname = $_FILES['file']['name'];
 $tmp = $_FILES['file']['tmp_name'];
 $filepath = 'now/';//记得要自己创建这个文件夹
 if(move_uploaded_file($tmp,$filepath.$imgname.".png")){
  echo "上传成功";
 }else{
  echo "上传失败";
 }

 ?>

完结。

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 原生JS实现简单屏幕截图

    原生JS实现简单屏幕截图

    本文主要介绍了原生JS实现简单屏幕截图,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • 深入理解requireJS-实现一个简单的模块加载器

    深入理解requireJS-实现一个简单的模块加载器

    本篇文章主要介绍了深入理解requireJS-实现一个简单的模块加载器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • js 多种变量定义(对象直接量,数组直接量和函数直接量)

    js 多种变量定义(对象直接量,数组直接量和函数直接量)

    js 多种变量定义(对象直接量,数组直接量和函数直接量),大家可以参考下,对于以后学习js 面向对于与json操作会有帮助。
    2010-05-05
  • JavaScript操作选择对象的简单实例

    JavaScript操作选择对象的简单实例

    下面小编就为大家带来一篇JavaScript操作选择对象的简单实例。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
    2016-05-05
  • JavaScript 处理树数据结构的方法示例

    JavaScript 处理树数据结构的方法示例

    这篇文章主要介绍了JavaScript 处理树数据结构的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • 利用JavaScript实现新闻滚动效果(实例代码)

    利用JavaScript实现新闻滚动效果(实例代码)

    这篇文章主要是对利用JavaScript实现新闻滚动效果的两种方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • Javascript 类型转换、封闭函数及常见内置对象操作示例

    Javascript 类型转换、封闭函数及常见内置对象操作示例

    这篇文章主要介绍了Javascript 类型转换、封闭函数及常见内置对象操作,结合实例形式分析了JavaScript类型显示转换、隐式转换、变量作用域、封闭函数及常用内置对象相关操作技巧,需要的朋友可以参考下
    2019-11-11
  • es6 js 匹配两个数组对象的方法

    es6 js 匹配两个数组对象的方法

    这篇文章主要介绍了es6 js 匹配两个数组对象的方法,实例代码介绍了判断两个数组用的value是否相等,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • javascript实现倒计时关闭广告

    javascript实现倒计时关闭广告

    这篇文章主要为大家详细介绍了javascript实现倒计时关闭广告,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02
  • JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结

    JavaScript在IE和Firefox(火狐)的不兼容问题解决方法小结

    今天测试代码时,发现不少IE可以运行的ajax,但在FF中报错。IE和Firefox(火狐)在JavaScript方面的不兼容及统一方法总结如下,需要的朋友可以看下,对于以后的代码书写一定要考虑到多浏览器的兼容性。
    2010-04-04

最新评论