前端怎么上传图片到后端JS_前端图片上传功能与Node后端处理完整流程-js教程-PHP中文网

前端怎么上传图片到后端JS_前端图片上传功能与Node后端处理完整流程

看不見的法師

发布： 2025-11-17 23:25:15

原创

986人浏览过

前端通过input选择图片，使用FormData和fetch将文件发送至Node.js后端；后端利用Express和multer中间件接收并保存图片到uploads目录，返回路径供前端展示。

前端怎么上传图片到后端js_前端图片上传功能与node后端处理完整流程

前端上传图片到后端，通常通过表单数据（FormData）将文件发送给Node.js服务器，后端使用中间件如 multer 处理上传。下面是一个完整的流程说明，涵盖前端HTML+JS实现、Node.js后端接收与保存图片的全过程。

前端：选择并上传图片

用户通过 input[type="file"] 选择图片，JavaScript 使用 FormData 和 fetch 将文件发送到后端。

示例代码：

<input type="file" id="imageInput" accept="image/*" />
<button onclick="uploadImage()">上传图片</button>

登录后复制

async function uploadImage() {
  const input = document.getElementById('imageInput');
  const file = input.files[0];

  if (!file) {
    alert("请选择一张图片");
    return;
  }

  const formData = new FormData();
  formData.append('picture', file); // 'picture' 是后端字段名

  try {
    const response = await fetch('http://localhost:3000/upload', {
      method: 'POST',
      body: formData
    });

    const result = await response.json();
    console.log('上传成功:', result);
  } catch (error) {
    console.error('上传失败:', error);
  }
}

登录后复制

关键点： 不需要手动设置 Content-Type，浏览器会自动为 FormData 设置 boundary；后端需匹配字段名（如 picture）。

立即学习“前端免费学习笔记（深入）”；

Node.js 后端：接收并保存图片

使用 Express 搭建服务，配合 multer 中间件处理 multipart/form-data 类型的请求。

Cutout老照片上色

Cutout.Pro推出的黑白图片上色

查看详情

安装依赖：

npm init -y
npm install express multer

登录后复制

服务器代码（app.js）：

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

// 配置 multer 存储
const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/'); // 图片保存路径
  },
  filename: (req, file, cb) => {
    const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9);
    cb(null, file.fieldname + '-' + uniqueSuffix + path.extname(file.originalname));
  }
});

const upload = multer({ storage: storage });

// 处理上传请求
app.post('/upload', upload.single('picture'), (req, res) => {
  if (!req.file) {
    return res.status(400).json({ error: '没有文件上传' });
  }

  // 返回图片访问路径（相对或绝对）
  res.json({
    message: '上传成功',
    filename: req.file.filename,
    path: '/uploads/' + req.file.filename
  });
});

// 提供静态资源访问
app.use('/uploads', express.static('uploads'));

// 启动服务
app.listen(3000, () => {
  console.log('服务器运行在 http://localhost:3000');
});

登录后复制

说明： multer 的 single('picture') 对应前端 append 的字段名；diskStorage 可自定义存储位置和文件名。