剖析 React+Node 全栈文件上传场景，无缝衔接全过程

引言

文件上传在当今的网络开发中无处不在，从简单的图片上传到复杂的文档提交。虽然文件上传看似简单，但背后却涉及到浏览器、服务器和数据库的复杂交互。本文旨在全面解析 React+Node 全栈文件上传场景，为你提供从前端到后端的无死角解决方案。我们将逐一探讨常见的上传场景，并提供清晰的前端和后端代码实现。准备好开启文件上传的深度探索之旅吧！

场景 1：单文件上传

前端：React

import React, { useState } from "react";
import axios from "axios";

const FileUpload = () => {
  const [file, setFile] = useState(null);

  const handleFileChange = (e) => {
    setFile(e.target.files[0]);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append("file", file);

    axios.post("/upload", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      console.log(res);
    }).catch((err) => {
      console.log(err);
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" onChange={handleFileChange} />
      <button type="submit">上传</button>
    </form>
  );
};

export default FileUpload;

后端：Node.js

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

const app = express();

app.use(multer({ dest: "./uploads" }).single("file"));

app.post("/upload", (req, res) => {
  res.json({
    success: true,
    message: "文件上传成功",
    file: req.file,
  });
});

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

场景 2：多文件上传

前端：React

import React, { useState } from "react";
import axios from "axios";

const MultipleFileUpload = () => {
  const [files, setFiles] = useState([]);

  const handleFileChange = (e) => {
    const newFiles = Array.from(e.target.files);
    setFiles(newFiles);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const formData = new FormData();
    files.forEach((file) => {
      formData.append("files", file);
    });

    axios.post("/upload-multiple", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      console.log(res);
    }).catch((err) => {
      console.log(err);
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" multiple onChange={handleFileChange} />
      <button type="submit">上传</button>
    </form>
  );
};

export default MultipleFileUpload;

后端：Node.js

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

const app = express();

app.use(multer({ dest: "./uploads" }).array("files"));

app.post("/upload-multiple", (req, res) => {
  res.json({
    success: true,
    message: "文件上传成功",
    files: req.files,
  });
});

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

场景 3：图像预览

前端：React

import React, { useState } from "react";
import axios from "axios";

const ImageUpload = () => {
  const [image, setImage] = useState(null);
  const [preview, setPreview] = useState(null);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setImage(file);

    const reader = new FileReader();
    reader.onloadend = () => {
      setPreview(reader.result);
    };
    reader.readAsDataURL(file);
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    const formData = new FormData();
    formData.append("image", image);

    axios.post("/upload-image", formData, {
      headers: {
        "Content-Type": "multipart/form-data",
      },
    }).then((res) => {
      console.log(res);
    }).catch((err) => {
      console.log(err);
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="file" accept="image/*" onChange={handleFileChange} />
      {preview && <img src={preview} alt="预览" />}
      <button type="submit">上传</button>
    </form>
  );
};

export default ImageUpload;

后端：Node.js

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

const app = express();

app.use(multer({ dest: "./uploads" }).single("image"));

app.post("/upload-image", (req, res) => {
  res.json({
    success: true,
    message: "图像上传成功",
    image: req.file,
  });
});

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

结语

本文深入探讨了 React+Node 全栈文件上传的各个场景，并提供了清晰易懂的代码实现。从单文件上传到多文件上传，再到图像预览，我们涵盖了常见的上传需求，让你可以灵活应对不同项目中的文件上传挑战。记住，实践是掌握任何技能的关键，欢迎你尝试这些代码示例并探索更多的可能性。希望本文能为你的文件上传之旅提供有益的指导！