ajax发送多个文件和参数、后端接收

使用Ajax上传多个文件和参数通常涉及到使用FormData对象。以下是一个简单的实例，展示了如何使用JavaScript和Ajax发送多个文件和参数到服务器端。

前端JavaScript代码：

// 假设有一个<form>元素，包含多个<input type="file">和其他输入字段
document.getElementById('my-form').addEventListener('submit', function(e) {
    e.preventDefault();
 
    var formData = new FormData();
 
    // 遍历所有文件输入，添加到FormData
    var fileInputs = document.querySelectorAll('input[type="file"]');
    for (var i = 0; i < fileInputs.length; i++) {
        if (fileInputs[i].files.length > 0) {
            formData.append('file' + i, fileInputs[i].files[0]);
        }
    }
 
    // 添加其他参数
    formData.append('param1', document.getElementById('param1').value);
    formData.append('param2', document.getElementById('param2').value);
 
    // 创建Ajax请求
    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/upload', true);
 
    // 上传进度
    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = (event.loaded / event.total) * 100;
            console.log(percentComplete.toFixed(2) + '%');
        }
    };
 
    // 请求完成
    xhr.onload = function() {
        if (this.status == 200) {
            console.log('Upload succeeded');
        } else {
            console.log('Upload failed');
        }
    };
 
    // 发送请求
    xhr.send(formData);
});

后端Node.js/Express代码：

const express = require('express');
const multer = require('multer');
const app = express();
 
// 设置 multer 配置
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/')
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now())
    }
})
const upload = multer({ storage: storage });
 
// 处理上传的路由
app.post('/upload', upload.array('file', 10), function (req, res, next) {
    // req.files 是 'file' 字段的文件数组
    // req.body 包含文本字段，可以通过 req.body.param1 访问
    console.log(req.files);
    console.log(req.body);
    res.send('Success');
});
 
app.listen(3000, function () {
  console.log('App listening on port 3000!');
});

在这个例子中，前端JavaScript使用FormData收集文件和参数，然后通过Ajax发送到服务器。服务器端使用Express框架和multer中间件来处理上传的文件和参数。