知识分享
分享创造价值 合作实现共赢

知识分享

当前位置: 首页 > 知识分享

小程序一次性上传多个本地图片,上拉加载照片

发布时间:2019-12-16 21:42:40作者:admin点击:

作者:李锡钒,来自原文地址

一:小程序之一次性上传多个本地相片

最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片。

问题描述

最近做项目的时候要实现一个上传相片的功能,用了微信提供的api之后发觉很容易就做出来了,在pc端调试也没有弊端,但是等到我用真机调试的时候就发现出问题了,问题就是在真机调试的时候无法一次性上传多张图片。

老规矩,以源码为导向

photos.js

//部分参数我就不抽出了,关键是看实现机制var app = getApp();var baseUrl = app.baseUrl;//上传图片的路径var uploadUrl = baseUrl+'pictureController/insertPic';var array = [];var owerId = '33aef7e0ac1b11e6af9f142d27fd7e9e';var albumId;var pageSize = 9;var currentPage = 1;var cryUrl = app.cryUrl;Page({  data: {        hasMore:false,        cryUrl:cryUrl,        clientHeight:0,        // 图片布局列表(二维数组,由`albumList`计算而得)        layoutList: [],        // 布局列数        layoutColumnSize: 3,        // 是否显示loading        showLoading: false,        // loading提示语        loadingMessage: '',        // 是否显示toast        showToast: false,        // 提示消息        toastMessage: '',        // 是否显示动作命令        showActionsSheet: false,        // 当前操作的图片        imageInAction: '',        // 图片预览模式        previewMode: false,        // 当前预览索引     previewIndex: 0,     images_upload: '../resources/images/camera.png',     imageBaseUrl : baseUrl+"pictures/"  },  /* 函数描述:作为上传文件时递归上传的函数体体;   * 参数描述:    * filePaths是文件路径数组   * successUp是成功上传的个数   * failUp是上传失败的个数   * i是文件路径数组的指标   * length是文件路径数组的长度   */          uploadDIY(filePaths,successUp,failUp,i,length){      wx.uploadFile({                    url: uploadUrl,                     filePath: filePaths[i],                    name: 'fileData',                    formData:{                      'pictureUid': owerId,                      'pictureAid': albumId                    },                    success: (resp) => {                        successUp++;                    },                    fail: (res) => {                        failUp ++;                    },                    complete: () => {                        i ++;                                                if(i == length)                        {                                                this.showToast('总共'+successUp+'张上传成功,'+failUp+'张上传失败!');                        }                        else                        {  //递归调用uploadDIY函数                            this.uploadDIY(filePaths,successUp,failUp,i,length);                        }                    },                });  },  uploadImage:function(e){    wx.chooseImage({        count: 9,            sizeType: ['original', 'compressed'],            sourceType: ['album', 'camera'],            success: (res) => {                var successUp = 0; //成功个数                var failUp = 0; //失败个数                var length = res.tempFilePaths.length; //总共个数                var i = 0; //第几个               this.uploadDIY(res.tempFilePaths,successUp,failUp,i,length);            },            });  }}) 

TOP

QQ客服

18910140161