为了使代码体积小 我这里将多图上传 封装到单独的一个js 页面的js调用他

// pages/home/home.jsvar upload = require('../../style/upload.js');
Page({/*** 页面的初始数据*///跳转页面btn:function(e){wx.navigateTo({url: '/pages/sechealth/sechealth',})},tijian:function(e){var that=this;upload.Much("https://wx.caoman.net/WXdiagnos/MuchUpload",function(res){var obj=JSON.parse(res.data);console.log(obj);var url="https://wx.caoman.net"+obj.url;that.setData({tijianPic: that.data.tijianPic.concat(url),imglist:1});console.log(that.data.tijianPic);})},data: {//面部图片路径facePic:[],//体检图片路径tijianPic:[],imglist:0,///控制体检报告是否显示},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {}
})

代码 tianjia 函数 为点击时触发的函数调用了 upload.js里边的函数 下面我们看 upload.js 代码

//上传一张图片
var upload=({
Single:function(Funurl,fn){wx.chooseImage({count:1, ///最多可以选择一张图片sizeType:['original','compressed'],//原图或压缩图sourceType:['album','camera'],//图片来源success: function(res) {const tempFilePaths=res.tempFilePaths;//相当于src路径//console.log(tempFilePaths);wx.uploadFile({header:{"Content-Type":"multipart/form-data"},name:'file',url:Funurl,filePath: tempFilePaths[0],success(res){fn(res);}})},})
},
//上传多张图片
Much:function(Funurl,fn){var list=new Array();wx.chooseImage({count:9,//最多可以选择9张图sizeType: ['original','compressed'],sourceType:['album','camera'],success: function(res) {const tempFilePaths=res.tempFilePaths;for (var i = 0; i < tempFilePaths.length;i++){wx.uploadFile({url: Funurl,name: 'file',filePath: tempFilePaths[i],//第几张图片header: {"Content-Type": "multipart/form-data"},success(res) {fn(res);},fail(res) {console.log(res.data);}})}},})
}
})
module.exports=upload;

在upload.js中 我们看到页面调用upload.js的函数了,我们会发现 该函数使用的是 for 将文件循环的上传了,,我在测试时发现 上传文件是异步执行的 这是 在循环完 在调用回调函数,发现回调函数的值是空的,为什么呢,

因为js的异步执行不会阻塞当前线程 当for循环执行完了 第一个上传文件还没有执行完,当函数回调成功后,里边的上传文件异步才依次执行完毕, 我们知道 数组是可以追加的 这时可以让函数回调多次 依次 给

tijianPic 变量追加数组值 当执行完后 我们在console.log() 发现 上传文件了三次 在回调后的代码块里输出 也是三次 那么三次 我们不停的在数组上追加 即上传了多个文件 返回的每个路径我们都存到变量

如果代码还解决不了 请仔细阅读 和测试 上部分代码为 实践项目中部分代码

微信小程序 多图上传解决方案相关推荐

  1. php微信小程序多图上传,tp5实现微信小程序多图片上传到服务器功能

    最近在做一个教育类的小商城的微信小程序,用到了上传多个图片文件到服务器端,这里做一个讲解,希望对大家有所帮助. 1,小程序端: 在wxml文件中: 删除 点击上传作业 在js文件中: Page({ / ...

  2. 微信小程序多图上传带进度提示的代码实例

    实例名称:多图上传进度提示 适用范围:微信小程序 基础库1.0.1及以上 page.js中书写代码片段如下 Page({data:{src:''},//上传事件upImage(e){wx.choose ...

  3. 小程序 | 微信小程序多图上传(点击上传、可修改删除与放大回显)

    微信小程序实现多图上传需求 文章目录 基本图片处理 index.js(选择上传.点击回显.修改删除) index.js(实现循环多图上传数据库) 公共组件utils utils/common.util ...

  4. 微信小程序多图上传/朋友圈传图效果【附完整源码】

    效果图 部分源代码 js文件: var uploadPicture = require('../Frameworks/common.js') //获取应用实例 const app = getApp() ...

  5. 基于Taro的微信小程序多图上传

    // 上传佐证组件代码 import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' ...

  6. uni-app 小程序多图上传

    uni-app 小程序多图上传: 官方提示说,App支持多文件上传,微信小程序只支持单文件上传,传多个文件需要反复调用本API.所以跨端的写法就是循环调用本API 步骤: //1.首先通过 uni.c ...

  7. uniapp 微信小程序开发 图片上传压缩

    uniapp 微信小程序开发 图片上传压缩 安卓上传图片并压缩 思路 全部代码 安卓上传图片并压缩 由于后端接口对图片的大小有限制,所以在上传图片是需要压缩处理: uni.chooseImage({c ...

  8. 微信小程序实现录音上传

    微信小程序实现录音上传 准备 开始 准备 1.微信开发者工具 2.Api文档 开始 打开微信开发者工具 项目->新建项目 选择小程序 appid是在微信公众平台申请的. 链接 新建完成后,项目自 ...

  9. 微信小程序多文件上传之wx-multipart

    微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...

最新文章

  1. 优胜队伍跑多快?优胜秘笈是什么?直播告诉你
  2. 3v stm32 供电 晶振起振_避免stm32rtc晶振不能起振的设计参考
  3. AI芯片怎么降功耗?从ISSCC2017说起
  4. HTTP、HTTPS、SSL总结
  5. mongodb 排序_技术分享 | MongoDB 一次排序超过内存限制的排查
  6. yolox: AssertionError: Caught AssertionError in DataLoader worker process 0.
  7. dubbo学习总结三 消费端
  8. Redis 开发规范
  9. 使用X-shell管理员root连接ubuntu17.10服务器拒绝密码的一个失误!
  10. 数通学习网络协议地图
  11. powershell ip_如何使用PowerShell更改IP地址
  12. 网络电视服务器账号密码,中兴网络电视机顶盒密码是多少
  13. Python scrapy 爬取拉勾网招聘信息
  14. 面试面经 | 2021大疆嵌入式软件工程师笔试题B卷
  15. 网站被恶意攻击了改怎么办?如何进行防护呢
  16. 基于关键链的项目风险管理
  17. 【元宇宙欧米说】元宇宙场景应用和营销新模式
  18. 左值引用——右值引用 详解
  19. Oracle表分区概念和实战
  20. Mysql添加用户与授权

热门文章

  1. function fnShowMessageBox(sTitle, sMsg)弹窗
  2. 页面库无法捕获到Added事件?
  3. 微信公众号发起微信支付 c#
  4. 系统状态检测 及进程控制
  5. Linux使用yum安装时出现The program package-cleanup is found in the yum-utils package.解决方法...
  6. 轻量型thttpd+php5
  7. linux查看文件写进程,Linux下如何知道文件被那个进程写
  8. 查询成绩最好的前两名_SQL查询整理
  9. python脚本-记录Python脚本的运行日志的方法
  10. Android 中Touch(触屏)事件传递机制