微信小程序实现同时上传多张图片

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

本文实例为大家分享了微信小程序实现同时上传多张图片的具体代码,供大家参考,具体内容如下

1.图片选择后,路径已经存入list中:

data: { 
 images: [], //选择的图片 
 },

2.调用递归上传的方法:

wx.chooseImage({
 var that = this
 count: 9,
 sizeType: ['original', 'compressed'],
 sourceType: ['album', 'camera'],
 success: function(res){ 
 var successUp = 0; //成功,初始化为0
 var failUp = 0; //失败,初始化为0
 var length = that.data.images.length; //总共上传的数量
 var count = 0; //第几张,初始化为0
 var url = serverUrl + '/secondHand/uploadImg?id=' + secondHandId; //上传的接口
 //调用上传图片的公共函数
 that.uploadOneByOne(url, that.data.images, successUp, failUp, count, length);
 }, 
 });

3.递归上传方法:

/**
 * 上传图片:递归的方式上传
 * url:上传地址
 * imgPaths:上传的图片列表
 * successUp:上传成功的个数,初始化为0
 * failUp:上传失败的个数,初始化为0
 * count:第几张
 * length:图片列表的长度
 */
 uploadOneByOne(url, imgPaths, successUp, failUp, count, length) {
 var that = this;
 wx.uploadFile({
 url: url, //上传地址地址
 filePath: imgPaths[count],
 name: "file", //后台接收的文件名
 success: function(e) {
 successUp++; //成功+1
 },
 fail: function(e) {
 failUp++; //失败+1
 },
 complete: function(e) {
 count++; //下一张
 if (count == length) {
 TODO: 上传完毕后跳转页面
 wx.showToast({
 title: '发布成功',
 icon: 'success',
 duration: 2000
 })
 }
 else {
 //递归调用,上传下一张
 that.uploadOneByOne(url, imgPaths, successUp, failUp, count, length);
 }
 }
 })
 },

4.后台接口:

@PostMapping("/uploadImg")
public String addSecondHandImg(String id, @RequestParam("file") MultipartFile[] files) {
 //该接口被多次调用,这里写自己的业务,省略。。。
 return "";
}

文章参考:微信小程序实现上传多个文件 超过10个

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

相关文章

  • JavaScript实现飞舞的泡泡效果

    JavaScript实现飞舞的泡泡效果

    这篇文章主要为大家详细介绍了JavaScript实现飞舞的泡泡效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-02-02
  • 详解JavaScript+Canvas绘制环形进度条

    详解JavaScript+Canvas绘制环形进度条

    canvas可以在页面中设定一个区域,再利用JavaScript动态地绘制图像。本文将利用canvas绘制一个可以动的环形进度条。文中的示例代码讲解详细,感兴趣的小伙伴可以动手试一试
    2022-02-02
  • 微信公众号获取用户地理位置并列出附近的门店的示例代码

    微信公众号获取用户地理位置并列出附近的门店的示例代码

    这篇文章主要介绍了微信公众号获取用户地理位置并列出附近的门店的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-07-07
  • 微信小程序实现手写签名的示例代码

    微信小程序实现手写签名的示例代码

    这篇文章主要和大家分享一个微信小程序的示例代码,可以实现手写签名的效果。文中的示例代码讲解详细,感兴趣的小伙伴可以了解一下
    2022-02-02
  • 微信小程序使用uni-app实现首页搜索框导航栏功能详解

    微信小程序使用uni-app实现首页搜索框导航栏功能详解

    这篇文章主要介绍了微信小程序使用uni-app实现首页搜索框导航栏功能,uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序
    2022-10-10
  • Javascript取整函数及向零取整几种常用的方法

    Javascript取整函数及向零取整几种常用的方法

    这篇文章主要介绍了Javascript取整函数及向零取整几种常用的方法,每种方法都有其特点和适用场景,推荐使用Math.trunc(),因为它语义明确、代码易读且性能较好,需要的朋友可以参考下
    2025-01-01
  • 纯js实现轮播图效果

    纯js实现轮播图效果

    这篇文章主要为大家详细介绍了纯js实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10
  • Javascript连接数据库查询并插入数据

    Javascript连接数据库查询并插入数据

    这篇文章主要介绍了Javascript连接数据库查询并插入数据,下面文章围绕主题展开详细内容,具有一的参考价值,需要的小伙伴可以参考一下,希望对你的学习有所帮助
    2022-03-03
  • uniapp实现微信H5扫码功能的完整步骤

    uniapp实现微信H5扫码功能的完整步骤

    在uni-app官网上发现uni-app不支持H5扫码功能,但是下面的提示说明可以通过微信的JS-SDK实现扫码功能,下面这篇文章主要给大家介绍了关于uniapp实现微信H5扫码功能的完整步骤,需要的朋友可以参考下
    2022-11-11
  • js 把字符串当函数执行的方法

    js 把字符串当函数执行的方法

    一段字符串 里面包含了 要执行的函数和参数等,需要去执行这段字符串。
    2010-03-03

最新评论