微信小程序如何一次性上传多个本地相片?

时间:2017-06-09 16:31:49 作者: anna

  今天给大家普及一下微信小程序如何一次性上传多个本地相片?下面就一起去看一看,了解了解,相信可以帮助到大家的。

在微信小程序怎么一次性上传多个本地相片呢?

  问题描述

  最近做项目的时候要实现一个上传相片的功能,用了微信提供的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);

  },

  });

  }

  })

  那么如何使用呢?

  修改了uploadUrl之后,直接调用 uploadImage 函数即可。

  以上就是微信小程序如何一次性上传多个本地相片的全部内容了,大家都学会了吗?

相关推荐
QQ游戏

热文推荐

  • 48小时热文
  • 每周热文

微信小程序如何一次性上传多个本地相片?