如何在Angular中以Blob形式发送通过file input获取的图片？

没问题，我来一步步帮你解决这个问题——从前端获取图片并以Blob形式提交，到后端存储为字符串，再到取回渲染成图片，全程给你讲清楚：

一、前端：获取图片并以Blob形式提交 #

首先要明确：你通过<input type="file">选中的文件本身就是File对象，而File是Blob的子类，所以不需要额外转换，直接用它提交就行。这里给你两种常用的提交方式：

方式1：用FormData提交（推荐，支持多字段场景） #

如果你的表单还有其他字段（比如图片名称、描述），用FormData最方便，它会自动处理文件编码：

<input type="file" id="imageInput" accept="image/*">
<button onclick="submitImage()">提交图片</button>

<script>
async function submitImage() {
  const input = document.getElementById('imageInput');
  const file = input.files[0];
  
  if (!file) {
    alert('请先选择一张图片');
    return;
  }

  // 创建FormData对象，将图片（Blob类型）添加进去
  const formData = new FormData();
  formData.append('image', file, file.name); // 第三个参数是文件名，可选
  // 如果有其他字段，比如描述，可以一起加进去
  // formData.append('description', '这是一张风景图');

  try {
    const response = await fetch('/api/upload-image', {
      method: 'POST',
      body: formData
    });

    if (response.ok) {
      const result = await response.json();
      console.log('上传成功！图片ID：', result.imageId);
    } else {
      console.error('上传失败，请检查后端接口');
    }
  } catch (err) {
    console.error('请求出错：', err);
  }
}
</script>

方式2：直接发送Blob（适合仅上传图片的场景） #

如果不需要提交其他字段，也可以直接把File（Blob）作为请求体发送：

async function submitImage() {
  const input = document.getElementById('imageInput');
  const file = input.files[0];
  if (!file) return;

  try {
    const response = await fetch('/api/upload-image', {
      method: 'POST',
      body: file,
      headers: {
        'Content-Type': file.type // 告诉后端文件类型，比如image/png
      }
    });

    // 后续处理同上
  } catch (err) {
    console.error('请求出错：', err);
  }
}

二、后端：接收Blob并存储为字符串 #

这里以Node.js/Express为例，演示如何接收并转成字符串存储。我们通常会把二进制数据转成Base64字符串，这样可以直接存在数据库的字符串字段里。

处理FormData提交的情况 #

需要用multer中间件处理FormData：

const express = require('express');
const multer = require('multer');
const app = express();
const upload = multer(); // 内存存储，适合小图片；大图片建议用磁盘存储

app.post('/api/upload-image', upload.single('image'), async (req, res) => {
  const file = req.file;
  if (!file) {
    return res.status(400).json({ error: '请上传图片' });
  }

  // 将二进制Buffer转成Base64字符串
  const base64String = file.buffer.toString('base64');
  
  // 这里替换成你的数据库存储逻辑，比如存到MongoDB/MySQL
  // await db.collection('images').insertOne({
  //   data: base64String,
  //   mimeType: file.mimetype,
  //   createdAt: new Date()
  // });

  res.json({ success: true, imageId: 'your-image-id' }); // 返回图片ID，方便后续取回
});

处理直接Blob提交的情况 #

如果是直接发送Blob，用express.raw中间件接收：

app.post('/api/upload-image', express.raw({ type: 'image/*' }), async (req, res) => {
  const buffer = req.body;
  const mimeType = req.headers['content-type'];
  
  const base64String = buffer.toString('base64');
  // 存储逻辑同上
  
  res.json({ success: true, imageId: 'your-image-id' });
});

三、前端：取回数据并渲染为图片 #

当你通过GET请求拿到存储的Base64字符串后，只需要创建Data URL，就能直接在<img>标签里渲染：

async function loadImage(imageId) {
  try {
    const response = await fetch(`/api/get-image/${imageId}`);
    const imageData = await response.json();
    
    // 从返回数据中拿到Base64字符串和文件类型
    const { base64, mimeType } = imageData;
    
    // 创建Data URL
    const imageUrl = `data:${mimeType};base64,${base64}`;
    
    // 渲染图片到页面
    const img = document.createElement('img');
    img.src = imageUrl;
    img.alt = '存储的图片';
    img.style.maxWidth = '500px'; // 可选，限制图片大小
    document.body.appendChild(img);
  } catch (err) {
    console.error('加载图片失败：', err);
  }
}

对应的后端GET接口（返回存储的Base64和类型）：

app.get('/api/get-image/:id', async (req, res) => {
  const imageId = req.params.id;
  
  // 从数据库取出存储的图片数据
  // const image = await db.collection('images').findOne({ _id: imageId });
  const image = { // 模拟数据
    data: 'your-base64-string',
    mimeType: 'image/png'
  };

  if (!image) {
    return res.status(404).json({ error: '图片不存在' });
  }

  res.json({
    base64: image.data,
    mimeType: image.mimeType
  });
});

一些注意事项 #

• 如果是大图片，Base64字符串会比原二进制数据大30%左右，此时建议后端直接存储二进制数据（比如MongoDB的GridFS，MySQL的BLOB类型），但如果要求必须存字符串，Base64是最优方案。
• 前后端分离的场景下，记得在后端配置CORS，避免跨域请求失败。
• 提交时尽量限制图片格式和大小，避免过大的请求影响性能。

内容的提问来源于stack exchange，提问作者joler-botol