使用HTML5 FileReader与Node.js FS上传文件后损坏且体积增大求助

嘿，这个问题我太熟悉了！你遇到的文件体积变大的问题，根源在于用了错误的编码方式处理二进制文件。咱们来拆解原因，直接给你修复后的方案：

问题根源 #

你用readAsBinaryString()读取文件，再以utf-8编码写入磁盘。但readAsBinaryString本身已经是被废弃的API，而且二进制文件（比如图片、压缩包、视频这类）的内容并不符合UTF-8编码规则。当Node.js用utf-8写入时，会把那些无法解析的二进制字节替换成UTF-8的替代字符（通常是�），这不仅让文件体积变大，还会损坏原文件的内容。

修复后的代码 #

正确的做法是用ArrayBuffer读取文件内容，转换成Node.js的Buffer对象后，以二进制模式写入磁盘（不需要指定编码），这样能完美保留原文件的所有字节：

var f = document.getElementById('file').files[0], r = new FileReader();
console.log(f); // 查看文件信息
r.onloadend = function(e) {
  var arrayBuffer = e.target.result;
  // 将浏览器的ArrayBuffer转换为Node.js可识别的Buffer
  var buffer = Buffer.from(arrayBuffer);
  var fs = require('fs');
  try {
    // 直接写入Buffer，默认是二进制模式，无需指定编码
    fs.writeFileSync(f.name, buffer);
    console.log('保存成功！');
  } catch (e) {
    alert('保存文件失败！');
    console.error('错误详情：', e);
  }
}
// 用ArrayBuffer读取文件，这是处理二进制文件的标准方式
r.readAsArrayBuffer(f);

额外提示 #

• 如果是处理文本文件，用utf-8编码没问题，但处理二进制文件（图片、音频、视频等）一定要用二进制模式写入。
• readAsBinaryString已经被MDN标记为废弃API，建议以后都用readAsArrayBuffer或者readAsDataURL来处理文件。

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