浏览器本地多文件选择上传原生JS实现及Node封装

2023-11-09 20:27:19

多文件上传：使用原生 JavaScript 和 Node.js 的全面指南

什么是多文件上传？

多文件上传是指同时上传多个文件到服务器或云端存储的过程。在现代 Web 开发中，这是一个常见需求，特别是对于涉及用户生成内容的应用程序。

使用原生 JavaScript 实现多文件上传

原生 JavaScript 提供了简单的 API 来处理多文件上传：

1. 创建多文件输入元素

<input type="file" multiple>

2. 监听 change 事件

document.querySelector('input[type="file"]').addEventListener('change', (event) => {
  // 获取选定的文件列表
  const files = event.target.files;
  
  // 遍历文件并处理
  for (const file of files) {
    // ...
  }
});

3. 使用 FileReader 读取文件内容

const reader = new FileReader();
reader.onload = () => {
  // 获取文件内容
  const data = reader.result;
  
  // ...
};
reader.readAsDataURL(file);

4. 使用 XMLHttpRequest 发送数据

const xhr = new XMLHttpRequest();
xhr.open('POST', 'upload-url');
xhr.send(data);

使用 Node.js 封装的多文件上传接口

Node.js 提供了 multer 模块，可以轻松封装多文件上传接口：

1. 安装 multer 模块

npm install multer

2. 创建路由处理上传

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

const app = express();
app.use(multer().array('files', 10));

app.post('/upload', (req, res) => {
  // 获取上传的文件
  const files = req.files;
  
  // ...
});

代码示例：完整上传流程

前端 JavaScript 代码：

const fileInput = document.querySelector('input[type="file"]');

fileInput.addEventListener('change', (event) => {
  const files = event.target.files;
  
  for (const file of files) {
    const reader = new FileReader();
    reader.onload = () => {
      const data = reader.result;
      
      // 使用 XMLHttpRequest 发送数据到 Node.js 后端
    };
    reader.readAsDataURL(file);
  }
});

Node.js 后端代码：

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

const app = express();
app.use(multer().array('files', 10));

app.post('/upload', (req, res) => {
  const files = req.files;
  
  // 存储文件到数据库或文件系统
  for (const file of files) {
    // ...
  }
  
  res.send('Files uploaded successfully');
});

app.listen(3000);