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

我们看firhealth.js文件内容

// pages/home/home.js
var 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. 微信小程序多图上传/朋友圈传图效果【附完整源码】

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

  2. 微信小程序多张图片上传

    微信小程序上传图片每次只能上传一张,所有很多朋友就会问想要多张图片上传怎么办? 首先,我们来看一看wx.chooseImage(object)和wx.uploadFile(OBJECT)这两个个api ...

  3. [转]微信小程序实现图片上传功能

    本文转自:http://blog.csdn.net/feter1992/article/details/77877659 前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何 ...

  4. nodeJs实现微信小程序的图片上传

    今天我来介绍一下nodejs如何实现保存微信小程序传过来的图片及其返回 首先wx.uploadFile绝大部分时候是配合wx.chooseImage一起出现的,毕竟选择好了图片,再统一上传是实现用户图 ...

  5. 微信小程序实现图片上传功能

    前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...

  6. 微信小程序--实现图片上传

    前端: 微信开发者工具 后端:.Net 服务器:阿里云 这里介绍微信小程序如何实现上传图片到自己的服务器上 前端代码 data: { productInfo: {} }, //添加Banner bin ...

  7. 微信小程序中图片上传阿里云Oss

    本人今年6月份毕业,最近刚在上海一家小公司实习,做微信小程序开发.最近工作遇到一个小问题. 微信小程序图片上传阿里云服务器Oss也折腾了蛮久才解决的,所以特意去记录一下. 第一步:配置阿里云地址: 我 ...

  8. [组件封装]微信小程序-图片批量上传照片墙

    描述 批量上传图片, 可设置最大上传个数, 可删除, 可设置默认值. 效果 源码 pictures-wall.wxml <view class="picturesWall"& ...

  9. 微信小程序实现图片上传,预览,删除

    wxml: <view class='imgBox'> <image class='imgList' wx:for="{{imgs}}" wx:for-item= ...

随机推荐

  1. 利用Powershell和ceye.io实现Windows账户密码回传

    利用Powershell和ceye.io实现Windows账户密码回传 转自:http://www.freebuf.com/articles/system/129068.html 最近在研究Power ...

  2. 【联系】—— Beta 分布与二项分布、共轭分布

    1. 伯努利分布与二项分布 伯努利分布:Bern(x|μ)=μx(1−μ)1−x,随机变量 x 取值为 0,1,μ 表示取值为 1 的概率: 二项分布:Bin(m|N,μ)=(Nm)μm(1−μ)N− ...

  3. 框架:Rureka

    ylbtech-框架:Rureka Eureka是Netflix开发的服务发现框架,本身是一个基于REST的服务,主要用于定位运行在AWS域中的中间层服务,以达到负载均衡和中间层服务故障转移的目的.S ...

  4. 134. Gas Station leetcode

    134. Gas Station 不会做. 1. 朴素的想法,就是针对每个位置判断一下,然后返回合法的位置,复杂度O(n^2),显然会超时. 把这道题转化一下吧,求哪些加油站不能走完一圈回到自己,要求 ...

  5. MobX入门

    MobX入门 本文尝试解释MobX是如何运作的.我们将用MobX创建一个小案例.如果你正在找靠谱的MobX文档,可以去看官方文档. 什么是MobX 官方文档的解释:简洁,易扩展的状态管理.简单来说,M ...

  6. (转载)Activity-数据状态的保存

    由于手机是便捷式移动设备,掌握在用户的手中,它的展示方向我们是无法预知的,具有不确定性.平时我们拿着手机多数为竖屏,但有时候我们感觉累了也会躺着去使用手机,那么这时手机屏幕的展示方向可能已经被用户切换 ...

  7. 2017/01/20 学习笔记 关于修改和重打jar包

    背景 客户提供了jar包,但发现db表中缺少一个字段,db追加以后需要修改jar包中的source. 操作  如何修改jar包中的source并重新打一个新的jar包,做了如下操作. ① 开包 解压j ...

  8. Amaze UI的一点总结

    做一个微信公众号内的网页的时候,用到了Amaze UI,也称妹子UI. 官网上宣称,Amaze UI中国首个开源 HTML5 跨屏前端框架,用下来的感觉是比较类似于bootstrap,都是移动端优先. ...

  9. springboot版本控制

    HandlerMapping通过继承InitializingBean接口在完成实例后,扫描所有的Controller和标识RequestMapping的方法,缓存这个映射对应关系.然后在应用运行的时候 ...

  10. 数据结构(1) 第一天 算法时间复杂度、线性表介绍、动态数组搭建(仿Vector)、单向链表搭建、企业链表思路

    01 数据结构基本概念_大O表示法 无论n是多少都执行三个具体步骤 执行了12步 O(12)=>O(1) O(n) log 2 N = log c N / log c N (相当于两个对数进行了 ...