uni-app uni.uploadFile不支持多文件批量上传 后端只能接到一个文件

uni-app uni.uploadFile不支持多文件批量上传 后端只能接到一个文件

示例代码：

let uploadUrl = HttpUtils.GET_BASE_URL() + this.url+"/register";  
return new Promise((resolve, reject)=>{
    uni.uploadFile({  
        url: uploadUrl,  
        files: files,  
        header: {},  
        formData: form,  
        success(uploadFileRes) {  
            console.log(uploadFileRes);  
            let resp = uploadFileRes.data;  
            if(typeof resp === "string") {  
                resp = JSON.parse(resp);  
            }  
            resolve(resp);  
        },  
        fail(resp) {  
            console.log(resp);  
            reject(resp);  
        }  
    })  
})

操作步骤：

  • APP端使用uni.uploadFile上传多张图片，同一个name，后端使用同一个参数接受

预期结果：

  • APP端上传的文件，后端可以接收到多张图片

实际结果：

  • APP端上传的文件，后端只能接收到一张图片

bug描述：

uni.uploadFile，传多个文件，同一个name，后端只能接到一个文件，在H5端正常，都能接到，但是在APP端只能接到一个

传到后端的json数组如图

因为场景是多文件上传，具体传几个文件没有限制，所以后端是用一个数组来接收这个批量文件的。


更多关于uni-app uni.uploadFile不支持多文件批量上传 后端只能接到一个文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

试了一下，用不同的name是可以上传成功，可是对于接口来说很不友好呀，难道官方是希望我服务端的接口写成这样？ @PostMapping("/testFile")
@ResponseBody
public void testFile(@RequestParam(value = “pictureFiles_0”, required = false) MultipartFile file0
, @RequestParam(value = “pictureFiles_1”, required = false) MultipartFile file1, @RequestParam(value = “pictureFiles_2”, required = false) MultipartFile file2
, @RequestParam(value = “pictureFiles_3”, required = false) MultipartFile file3, @RequestParam(value = “pictureFiles_4”, required = false) MultipartFile file4
, @RequestParam(value = “pictureFiles_5”, required = false) MultipartFile file5, @RequestParam(value = “pictureFiles_6”, required = false) MultipartFile file6
, @RequestParam(value = “pictureFiles_7”, required = false) MultipartFile file7, @RequestParam(value = “pictureFiles_8”, required = false) MultipartFile file8
, @RequestParam(value = “pictureFiles_9”, required = false) MultipartFile file9) {
System.out.println("==============files.length===========");
}

更多关于uni-app uni.uploadFile不支持多文件批量上传 后端只能接到一个文件的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这样用来实现批量上传，也忒坑了吧？有没有办法解决一下。。。

我这是上传10张，万一我要是上传20张，那我这接受参数得写20个？

抱歉抱歉，是我学艺不精，后端不能再用Multipart来接收了，应该用MultipartRequest来接收，然后再自行处理，代码如下： files.getMultiFileMap().forEach((key, multipartFiles) -> {
MultipartFile multipartFile = multipartFiles.get(0);
//对文件的具体操作
}); 但是，实话说，虽然我这个问题解决了，但是为什么H5可以这样批量上传，APP却要服务端处理呢？这是个问题。

我发现，提BUG基本没有官方的人来回答，邀请了也没用，可是UNIAPP却又有这么多的问题，这么多用的不方便的地方，唉。。。估计只有付费技术咨询，才会有人来解答吧。uniapp祝你越来越好。

在uni-app中，如果你遇到uni.uploadFile不支持多文件批量上传的问题，通常是因为每次调用uni.uploadFile只能上传一个文件。要实现多文件批量上传，你可以通过循环每个文件并依次调用uni.uploadFile，或者使用一些策略来合并文件上传请求。以下是一个示例代码，展示了如何通过循环每个文件并分别上传来实现多文件上传。

示例代码

  1. 前端代码（uni-app）：
// 假设你有一个文件列表files，每个文件都是通过<input type="file">获取的
let files = [file1, file2, file3]; // 这里应该是你通过某种方式获取的文件列表

let uploadTasks = [];

files.forEach((file, index) => {
    let formData = new FormData();
    formData.append('file', file);
    formData.append('index', index); // 可以用来标识文件的顺序或编号

    uni.uploadFile({
        url: 'https://your-backend-url.com/upload', // 后端接收文件的接口
        filePath: file.path,
        name: 'file',
        formData: formData,
        success: (uploadFileRes) => {
            console.log('上传成功', uploadFileRes);
            // 可以在这里处理上传成功的逻辑
        },
        fail: (err) => {
            console.error('上传失败', err);
            // 可以在这里处理上传失败的逻辑
        },
        complete: () => {
            uploadTasks.pop(); // 完成一个上传任务后，从任务列表中移除
            if (uploadTasks.length === 0) {
                console.log('所有文件上传完成');
            }
        }
    });

    // 将当前上传任务添加到任务列表，以便跟踪所有上传进度
    uploadTasks.push(true);
});
  1. 后端代码（示例为Node.js + Express）：
const express = require('express');
const multer = require('multer');
const app = express();
const port = 3000;

const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
    if (!req.file) {
        return res.status(400).send('No file uploaded.');
    }
    // 处理上传的文件
    console.log('File received:', req.file);
    res.send('File uploaded successfully.');
});

app.listen(port, () => {
    console.log(`Server listening at http://localhost:${port}`);
});

注意事项

  • 文件大小限制：确保后端和前端都设置了合理的文件大小限制。
  • 错误处理：在实际应用中，需要更完善的错误处理机制，例如重试上传失败的文件。
  • 并发控制：如果文件数量很多，可能需要考虑并发控制，以避免同时上传太多文件导致的服务器压力。

通过上述方法，你可以在uni-app中实现多文件批量上传，并且后端能够正确接收到所有文件。

回到顶部