Vue+Express上传Canvas导出图片时出现MIME/编码异常问题

核心错误点 #

1. 二进制文件读取编码错误
   图片属于二进制文件，你在调用fs.readFileSync时指定了utf8编码，会把原始的二进制字节强行按UTF-8规则解码为字符串，这个过程会不可逆损坏图片的原始二进制数据，是导致存储文件内容异常的根本原因。即使你后续移除了编码参数，如果仍将读取结果转为字符串传入File构造函数，也会出现同样问题。
2. 异步逻辑写法错误
   formidable的parse方法是回调式API，本身不返回Promise，你之前写的await form.parse()是无效的，可能出现逻辑执行顺序混乱，文件还没读取完成就进入存储流程的问题。

修复后代码 #

const mime = require('mime');
const { v4: uuid } = require('uuid');
const fs = require('fs');
const formidable = require('formidable');

app.post("/api/upload", async (req, res) => {
  try {
    const form = new formidable.IncomingForm();
    // 回调转Promise适配await，保证执行顺序正确
    const { fields, files } = await new Promise((resolve, reject) => {
      form.parse(req, (err, fields, files) => {
        if (err) return reject(err);
        resolve({ fields, files });
      });
    });

    // 生成上传文件名
    const uploadName = `${uuid()}.${mime.extension(files.objectPicture.mimetype)}`;
    // 读取文件不指定编码，直接返回Buffer二进制对象
    const fileBuffer = fs.readFileSync(files.objectPicture.filepath);
    // 传入二进制Buffer构造File对象
    const objectPicture = new File(
      [fileBuffer],
      uploadName,
      { type: files.objectPicture.mimetype }
    );

    // 后续你的存储逻辑
    // ...
    
    res.status(200).json({ code: 0, msg: '上传成功' });
  } catch (err) {
    res.status(500).json({ code: 1, msg: '上传失败', error: err.message });
  }
});

验证方法 #

你可以分别计算formidable生成的临时文件的MD5，和读取后得到的fileBuffer的MD5，两者完全一致即可确认二进制数据没有被损坏。

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