React + Express + Axios 图片上传踩坑指南

React+Express+Axios 图片上传踩坑指南

当我们构建一个允许用户上传图片到服务器的 Web 应用程序时，可能会遇到一系列问题。本文将分享使用 React、Express 和 Axios 构建此类应用程序时踩过的坑，以及如何规避这些问题。

坑 1：使用错误的请求方法

在 React 前端，请确保在发送包含图像数据的请求时使用 multipart/form-data 请求头。

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

坑 2：Express 配置错误

在 Express 后端，需要配置 body-parser 中间件来解析 multipart/form-data 请求。

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

坑 3：未设置 CORS 标头

在 Express 后端，需要设置 CORS 标头以允许来自 React 前端的请求。

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

坑 4：未检查文件类型

在后端，请检查上传文件的类型是否允许。

if (!['image/jpeg', 'image/png'].includes(req.file.mimetype)) {
  throw new Error('Invalid file type');
}

坑 5：未正确保存文件

在后端，请确保将上传的文件保存在允许应用程序访问的目录中。

req.file.mv('./uploads/' + req.file.name);

坑 6：前端未处理错误

在 React 前端，请处理从后端发出的任何错误，并向用户显示友好的错误消息。

try {
  const res = await axios.post('/upload', formData);
} catch (err) {
  alert('上传失败：' + err.message);
}

坑 7：使用不安全的 URL

确保应用程序使用安全协议（HTTPS）来上传图像。

坑 8：未优化性能

在后端，使用云存储服务（如 AWS S3）或 CDN 来存储和提供图像，以优化性能。

总结

通过遵循这些提示，可以避免在使用 React、Express 和 Axios 上传图片时遇到的常见问题。仔细检查配置、处理错误、优化性能，并保持安全，可以创建一个可靠且高效的图像上传系统。