为了使代码体积小 我这里将多图上传 封装到单独的一个js 页面的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() 发现 上传文件了三次 在回调后的代码块里输出 也是三次 那么三次 我们不停的在数组上追加 即上传了多个文件 返回的每个路径我们都存到变量
如果代码还解决不了 请仔细阅读 和测试 上部分代码为 实践项目中部分代码
