服务器怎么接收多张微信小程序上传的图片,微信小程序实现同时上传多张图片...

男娘i 2022-09-03 14:14 126阅读 0赞

本文实例为大家分享了微信小程序实现同时上传多张图片的具体代码，供大家参考，具体内容如下

1.图片选择后，路径已经存入list中：

data: \{

images: \[\], //选择的图片

\},

2.调用递归上传的方法：

wx.chooseImage(\{

var that = this

count: 9,

sizeType: \['original', 'compressed'\],

sourceType: \['album', 'camera'\],

success: function(res)\{

var successUp = 0; //成功，初始化为0

var failUp = 0; //失败，初始化为0

var length = that.data.images.length; //总共上传的数量

var count = 0; //第几张，初始化为0

var url = serverUrl + '/secondHand/uploadImg?id=' + secondHandId; //上传的接口

//调用上传图片的公共函数

that.uploadOneByOne(url, that.data.images, successUp, failUp, count, length);

\},

\});

3.递归上传方法：

/\*\*

\* 上传图片：递归的方式上传

\* url:上传地址

\* imgPaths：上传的图片列表

\* successUp：上传成功的个数，初始化为0

\* failUp：上传失败的个数，初始化为0

\* count：第几张

\* length：图片列表的长度

\*/

uploadOneByOne(url, imgPaths, successUp, failUp, count, length) \{

var that = this;

wx.uploadFile(\{

url: url, //上传地址地址

filePath: imgPaths\[count\],

name: "file", //后台接收的文件名

success: function(e) \{

successUp++; //成功+1

\},

fail: function(e) \{

failUp++; //失败+1

\},

complete: function(e) \{

count++; //下一张

if (count == length) \{

TODO: 上传完毕后跳转页面

wx.showToast(\{

title: '发布成功',

icon: 'success',

duration: 2000

\})

\}

else \{

//递归调用，上传下一张

that.uploadOneByOne(url, imgPaths, successUp, failUp, count, length);

\}

\}

\})

\},

4.后台接口：

@PostMapping("/uploadImg")

public String addSecondHandImg(String id, @RequestParam("file") MultipartFile\[\] files) \{

//该接口被多次调用，这里写自己的业务，省略。。。

return "";

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，126人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序如何上传图片

微信小程序上传图片的方法很简单，你可以使用微信小程序的API来实现，具体步骤如下：1. 首先，在小程序的页面中，使用![Image 1][]标签来引用图片；2. 然后，在小程序

素颜马尾好姑娘i/ 2024年03月25日 04:21/ 0 赞/ 12 阅读

相关微信小程序实现上传多张图片，删除图片

最近在做微信小程序，遇到上传多张图片到服务器，计算上传图片的张数，并且可以手动删除图片，下面是效果图效果图： ![20200609145904640.png][] 本

Bertha 。/ 2023年02月16日 09:25/ 0 赞/ 92 阅读

相关微信小程序上传图片/文件

微信官方文档有提供上传文件方法： wx.chooseMessageFile(Object object) > 基础库 2.5.0 开始支持，低版本需做[兼容处理]

水深无声/ 2022年12月18日 11:53/ 0 赞/ 163 阅读

相关服务器怎么接收多张微信小程序上传的图片,微信小程序实现同时上传多张图片...

本文实例为大家分享了微信小程序实现同时上传多张图片的具体代码，供大家参考，具体内容如下 1.图片选择后，路径已经存入list中： data: \{ images: \[\

男娘i/ 2022年09月03日 14:14/ 0 赞/ 127 阅读

相关微信小程序上传图片文件小程序+Java

小程序代码： chooseImage(){ wx.chooseImage({ success: function (res)

我会带着你远行/ 2022年05月11日 05:34/ 0 赞/ 294 阅读

相关微信小程序---单张图片上传到七牛

单张图上传`到七牛：` const qiniuUploader = require("../../../utils/qiniuUploader"); // 路径要自己

朴灿烈づ我的快乐病毒、/ 2022年03月09日 15:08/ 0 赞/ 286 阅读

相关微信小程序上传图片

//添加图片 joinPicture: function (e) { var index = e.currentTarget.dataset

痛定思痛。/ 2021年09月17日 03:02/ 0 赞/ 548 阅读

相关微信小程序实现上传图片功能

效果图 ![20200910114833695.jpg][]![20200910114940709.jpg][]![20200910115003858.jpg][]

今天药忘吃喽~/ 2021年09月02日 04:04/ 0 赞/ 553 阅读

相关微信小程序实现多张图片上传

//app.js uploadimg(data) { var that = this, i = data.i ? data.i

た入场券/ 2021年07月24日 23:15/ 0 赞/ 488 阅读

相关微信小程序单张本地图片上传，拍摄图片上传

wxml <button bindtap="upimg" class='jia_img' >上传</button> <image src="{

阳光穿透心脏的1/2处/ 2021年07月24日 17:20/ 0 赞/ 547 阅读