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

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

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

问题描述

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

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

本文来自投稿,不代表酷牛教程立场,如若转载,请注明出处:https://www.xukn.com/97485.html

(0)
上一篇 2024-02-17 10:25
下一篇 2024-02-17 10:41

相关推荐