HTTP请求上传图片的完整步骤详解

HTTP请求上传图片的基本流程

在开发网页或移动应用时，上传图片是常见需求。比如用户发帖配图、头像更换、商品上架等场景，背后都是通过HTTP请求把图片发送到服务器。整个过程并不复杂，掌握几个关键点就能搞定。

准备阶段：选择文件并读取数据

前端通常用 input 元素让用户选择图片文件。一旦选中，JavaScript 可以通过 FileReader 或直接使用 FormData 获取文件内容。

<input type="file" id="imageInput" accept="image/*">

当用户选择了图片后，可以用以下方式读取：

const input = document.getElementById('imageInput');
input.addEventListener('change', function() {
  const file = this.files[0];
  if (file) {
    const formData = new FormData();
    formData.append('avatar', file);
    // 准备发送请求
  }
});

构造HTTP请求发送图片

使用 fetch 或 XMLHttpRequest 都可以发送带图片的请求。关键是将图片数据放入 FormData 对象，并设置正确的请求头。大多数情况下不需要手动设置 Content-Type，因为浏览器会自动添加 boundary 信息。

fetch('/api/upload', {
  method: 'POST',
  body: formData  // 自动处理 multipart/form-data
})
.then(response => response.json())
.then(data => {
  console.log('上传成功:', data);
});

服务器接收到请求后，会解析 multipart/form-data 格式的数据，提取出文件字段（如 avatar），然后保存到指定位置或上传至云存储。

后端如何接收图片

以 Node.js + Express 为例，常用 multer 中间件处理文件上传：

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

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, 'uploads/')
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname)
  }
});

const upload = multer({ storage });

app.post('/api/upload', upload.single('avatar'), (req, res) => {
  res.json({ message: '图片上传成功', path: req.file.path });
});

这里的 'avatar' 要和前端 append 的字段名保持一致，否则拿不到文件。

注意事项和常见问题

图片太大时容易超时，建议前端先做压缩。比如用 canvas 将图片缩放到 1080px 宽度以内，既节省流量又提升上传速度。

跨域问题也常遇到。如果前端域名和接口不在同一个源下，需要后端开启 CORS 支持。

上传进度提示对用户体验很重要。fetch 不支持监听上传进度，可以改用 XMLHttpRequest 实现：

const xhr = new XMLHttpRequest();
xhr.open('POST', '/api/upload');
xhr.upload.onprogress = function(e) {
  if (e.lengthComputable) {
    const percent = (e.loaded / e.total) * 100;
    console.log(`上传进度: ${percent.toFixed(0)}%`);
  }
};
xhr.send(formData);

最后别忘了加错误处理。网络中断、服务异常都可能导致上传失败，给用户一个明确提示比静默失败更友好。