如何将<input type="file">中的图片编码为Base64字符串？适配Express后端

当然可以，你可以用浏览器的FileReader API把图片转成Base64字符串，这样就能把完整的图片内容放到请求体里发送了。

你之前遇到的问题是因为document.getElementById("image").value获取的只是浏览器出于安全考虑暴露的文件名，并非实际的文件内容，所以后端只能拿到文件名。

前端实现代码 #

// 获取文件输入元素
const fileInput = document.getElementById("image");
// 监听文件选择事件
fileInput.addEventListener("change", function() {
  const selectedFile = this.files[0];
  if (!selectedFile) return;

  const reader = new FileReader();
  // 以Base64格式读取文件
  reader.readAsDataURL(selectedFile);
  
  reader.onload = function(e) {
    // e.target.result即为包含图片内容的Base64字符串
    const base64Image = e.target.result;

    // 发送POST请求到后端
    fetch("/upload-image", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        image: base64Image
      })
    })
    .then(res => res.json())
    .then(data => console.log("上传成功", data))
    .catch(err => console.error("上传出错", err));
  };
});

Express后端处理代码 #

const express = require("express");
const app = express();
const fs = require("fs");
const path = require("path");

// 解析JSON请求体，同时设置较大的大小限制（Base64图片体积会增大）
app.use(express.json({ limit: "10mb" }));

app.post("/upload-image", (req, res) => {
  const { image } = req.body;
  if (!image) {
    return res.status(400).json({ msg: "未接收到图片数据" });
  }

  // 移除Base64字符串的前缀标识（如data:image/png;base64,）
  const base64Content = image.replace(/^data:image\/\w+;base64,/, "");
  // 将Base64转为Buffer
  const imageBuffer = Buffer.from(base64Content, "base64");
  
  // 生成保存路径（需确保uploads目录存在）
  const savePath = path.join(__dirname, "uploads", `img_${Date.now()}.png`);
  
  fs.writeFile(savePath, imageBuffer, (err) => {
    if (err) {
      return res.status(500).json({ msg: "图片保存失败", error: err.message });
    }
    res.json({ msg: "图片上传成功", filePath: savePath });
  });
});

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

注意事项 #

• Base64编码会让文件体积比原文件大30%左右，如果是大尺寸图片，更推荐用FormData直接上传二进制文件，传输效率更高
• 务必调整Express的请求体大小限制，避免因Base64字符串过大导致请求被拦截
• 可以通过Base64字符串的前缀判断图片格式（比如data:image/png;base64,对应PNG格式），保存时设置正确的文件后缀

内容的提问来源于stack exchange，提问作者RaptorRV