多文件上传 前端 后端 详解

多文件上传指的是一次上传多个文件，而不是一次只上传一个文件。下面我会分别介绍前端和后端的实现方式。

前端实现：

前端通常使用HTML中的`<input type="file" multiple>`元素来实现多文件上传功能，其中`multiple`属性表示允许选择多个文件。用户选择文件后，前端会将文件信息存储在FormData对象中，然后通过ajax请求将FormData对象发送到后端。

示例代码：

<form id="file-form">
  <input type="file" id="file-input" multiple>
  <button type="submit">上传文件</button>
</form>

<script>
  const form = document.getElementById('file-form');
  const fileInput = document.getElementById('file-input');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const formData = new FormData();
    for (let i = 0; i < fileInput.files.length; i++) {
      formData.append('files', fileInput.files[i]);
    }
    fetch('/upload', {
      method: 'POST',
      body: formData
    })
    .then(response => {
      console.log(response);
    })
    .catch(error => {
      console.error(error);
    });
  });
</script>

后端实现：

后端通常使用框架提供的文件上传中间件来处理文件上传，例如Node.js中的`multer`中间件。后端接收到前端发送的FormData对象后，通过中间件解析出文件信息，然后将文件保存到指定目录。

示例代码（使用Express框架和multer中间件）：

const express = require('express');
const multer = require('multer');

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

app.post('/upload', upload.array('files'), (req, res) => {
  console.log(req.files);
  res.send('上传成功');
});

app.listen(3000, () => {
  console.log('服务已启动');
});

在上面的示例中，`multer`中间件的`upload.array('files')`表示接收名为`files`的文件数组。在处理上传成功后，后端会返回一个响应，告诉前端上传成功。

需要注意的是，在上传大文件时，为了避免内存溢出，通常需要对文件进行分片上传和断点续传等优化处理。