尝试使用 fileReader.readAsBinaryString 通过 AJAX 将 PNG 文件上传到服务器，精简代码（fileObject 是包含我的文件信息的对象）；
var fileReader = new FileReader();
fileReader.onload = function(e) {
var xmlHttpRequest = new XMLHttpRequest();
//Some AJAX-y stuff - callbacks, handlers etc.
xmlHttpRequest.open("POST", '/pushfile', true);
var dashes = '--';
var boundary = 'aperturephotoupload';
var crlf = "\r\n";
//Post with the correct MIME type (If the OS can identify one)
if ( fileObject.type == '' ){
filetype = 'application/octet-stream';
} else {
filetype = fileObject.type;
}
//Build a HTTP request to post the file
var data = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + unescape(encodeURIComponent(fileObject.name)) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf + e.target.result + crlf + dashes + boundary + dashes;
xmlHttpRequest.setRequestHeader("Content-Type", "multipart/form-data;boundary=" + boundary);
//Send the binary data
xmlHttpRequest.send(data);
}
fileReader.readAsBinaryString(fileObject);
在上传之前检查文件的前几行（使用 VI）给我
上传后显示相同的文件
所以它看起来像是某个地方的格式/编码问题，我尝试在原始二进制数据上使用简单的 UTF8 编码函数
function utf8encode(string) {
string = string.replace(/\r\n/g,"\n");
var utftext = "";
for (var n = 0; n < string.length; n++) {
var c = string.charCodeAt(n);
if (c < 128) {
utftext += String.fromCharCode(c);
}
else if((c > 127) && (c < 2048)) {
utftext += String.fromCharCode((c >> 6) | 192);
utftext += String.fromCharCode((c & 63) | 128);
}
else {
utftext += String.fromCharCode((c >> 12) | 224);
utftext += String.fromCharCode(((c >> 6) & 63) | 128);
utftext += String.fromCharCode((c & 63) | 128);
}
}
return utftext;
)
然后在原来的代码中
//Build a HTTP request to post the file
var data = dashes + boundary + crlf + "Content-Disposition: form-data;" + "name=\"file\";" + "filename=\"" + unescape(encodeURIComponent(file.file.name)) + "\"" + crlf + "Content-Type: " + filetype + crlf + crlf + utf8encode(e.target.result) + crlf + dashes + boundary + dashes;
这给了我的输出
仍然不是原始文件=（
如何对文件进行编码/加载/处理以避免编码问题，以便 HTTP 请求中收到的文件与上传之前的文件相同。
其他一些可能有用的信息，如果我使用 fileObject.getAsBinary() 来获取二进制数据而不是使用 fileReader.readAsBinaryString() ，它可以正常工作。但 getAsBinary 仅适用于 Firefox。我已经在 Mac 上的 Firefox 和 Chrome 中对此进行了测试，得到了相同的结果。后端上传正在由NGINX 上传模块，再次在 Mac 上运行。服务器和客户端在同一台机器上。我尝试上传的任何文件都会发生同样的事情，我只是选择 PNG，因为它是最明显的例子。
（以下是迟到但完整的答案）
FileReader.readAsBinaryString() is 已弃用。不要使用它！它不再在W3C 文件 API 工作草案:
void abort();
void readAsArrayBuffer(Blob blob);
void readAsText(Blob blob, optional DOMString encoding);
void readAsDataURL(Blob blob);
注意：请注意File是一种扩展Blob结构。
Mozilla 仍然实现readAsBinaryString()并在中描述它MDN FileApi 文档:
void abort();
void readAsArrayBuffer(in Blob blob); Requires Gecko 7.0
void readAsBinaryString(in Blob blob);
void readAsDataURL(in Blob file);
void readAsText(in Blob blob, [optional] in DOMString encoding);
背后的原因readAsBinaryString()我认为弃用如下：JavaScript 字符串的标准是DOMString它只接受 UTF-8 字符，而不接受随机二进制数据。因此，不要使用 readAsBinaryString()，这根本不安全且不符合 ECMAScript。
我们知道JavaScript 字符串不应该存储二进制数据但 Mozilla 在某种程度上可以。我认为这很危险。Blob and typed arrays (ArrayBuffer以及尚未实施但不必要的StringView）的发明目的只有一个：允许使用纯二进制数据，不受 UTF-8 字符串限制。
XMLHttpRequest.send()有以下调用选项：
void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);
XMLHttpRequest.sendAsBinary()有以下调用选项：
void sendAsBinary( in DOMString body );
sendAsBinary() 不是标准，Chrome 可能不支持。
所以你有几个选择：
send() the FileReader.result of FileReader.readAsArrayBuffer ( fileObject )。操作起来比较复杂（你必须为它创建一个单独的 send() ），但它是推荐方法.send() the FileReader.result of FileReader.readAsDataURL( fileObject )。它会产生无用的开销和压缩延迟，需要在服务器端执行解压缩步骤，但很容易在 Javascript 中作为字符串进行操作。sendAsBinary() the FileReader.result of FileReader.readAsBinaryString( fileObject )
MDN指出：
发送二进制内容（如文件上传）的最佳方法是使用 ArrayBuffers 或 Blob 与 send() 方法结合使用。然而， 如果要发送可字符串化的原始数据，请使用 sendAsBinary() 方法，或 StringView（非本机）类型数组超类。