文件读取器：readAsArrayBuffer() 与 readAsBinaryString()答案

【问题标题】：fileReader: readAsArrayBuffer() vs readAsBinaryString()文件读取器：readAsArrayBuffer() 与 readAsBinaryString()
【发布时间】：2015-01-08 15:49:46
【问题描述】：

我正在使用 reader.readAsArrayBuffer() 将文件发送到 node.js，以便我可以将其保存在 /public 文件夹中。

reader.readAsArrayBuffer(event.currentTarget.files[0])

读取完成后，它会调用 Meteor.method()

            reader.addEventListener("loadend", function(evt){

                Meteor.call("saveFile", reader.result)

            })

meteor 方法接收一个文件并将其保存到我的公共/文件夹中。

      saveFile:function(file){

            var fs = Npm.require("fs")

            fs.writeFile('../../../../../public/logo/jow.png', file, {encoding:"binary"}, function (err) {

                console.log(err)
                console.log("file saved")

            });

        }

但是，问题是我从来没有正确编码，当在 /public/logo/jow.png 中打开文件时，我收到以下消息：

jow.png can not be read, it may be damaged.

但是当我将 readAsArrayBuffer() 更改为 readAsBinaryString() 时，它按预期工作，我可以打开图像。

有什么想法吗？

【问题讨论】：

这有什么更新吗？我在 MDN 上读到 readAsBinaryString 已被弃用。它对你有用吗？
@helloChris 我最终在我的流星方法中使用了一个缓冲区 (var buffer = new Buffer(file.length)) ... 然后对于每个文件 (buffer.writeUInt8(file) ... 然后(fs.writeFile(path + buffer)) ... 所以调用meteor方法 (var byteArray = new Uint8Array(reader.result)) ..; Meteor.call("saveFile", byteArray)
这不是一个可重现的问题。两种方法产生相同的结果，没有区别。这可能是 OP 代码中的另一个错误。
这里怎么没有答案？不推荐使用的方法，如何使用其他方法如readAsArrayBuffer()
在我的移动应用程序中保存/读取图像文件，我使用 FileReader 和 Blob 的组合。您可以将 base64 图像字符串保存到 blob，并使用 FileReader readAsArrayBuffer 读取此 blob。我使用它没有任何问题。 node.js 中的 Blob 尝试替换为 this

标签： node.js meteor filereader

【解决方案1】：

是因为readAsArrayBuffer 以二进制数据 (blob) 形式发送信息。

如果您在 nodejs Buffers and character encodings 中查看 de docs，则 binary 编码是 latin1 编码的别名。

我不知道流星，但如果file 是Buffer，您可以按原样发送。

示例：

<body>
    <input type="file" />
    <button onclick="sendFile();">sendFile</button>
    <script>
        const sendFile = async () => {
            const reader = new FileReader();
            const file = document.querySelector('input[type=file]').files[0];

            reader.onloadend = function () {
                var xmlHttpRequest = new XMLHttpRequest();
                xmlHttpRequest.open("POST", 'http:/localhost:1234/', true);
                xmlHttpRequest.setRequestHeader("Content-Type", file.type);
                xmlHttpRequest.send(reader.result);
            }

            reader.readAsArrayBuffer(file);
        };
    </script>
</body>

const http = require("http");
const fs = require("fs");

http.createServer((req, res) => {
    if (req.method === "OPTIONS") {
        res.setHeader('Access-Control-Allow-Origin', '*');
        res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS');
        res.setHeader('Access-Control-Allow-Headers', '*');
        res.writeHead(200, { });
        res.end();
        return;
    }

    if (req.method === "POST") {
        const data = [];
        req.on('data', chunk => {
            data.push(chunk);
        });
        req.on('end', () => {
            fs.writeFileSync(__dirname + "/file.png", Buffer.concat(data));
            res.writeHead(200, { });
            res.end();
        });
        return;
    }
}).listen(1234);

我发送一个 PNG 文件并打开它有任何问题。

【讨论】：