Javascript - 文件上传，readAsArrayBuffer？

Question

我目前正在尝试将文件上传到我的服务器。但我不太确定如何使用 readAsArrayBuffer 来做到这一点。如果我使用 readAsBinaryString，这将有效。

如果我尝试 console.log 它只返回 'arrayBuffer: {}'。 在我尝试上传它之后，我可以看到内部帖子只发送了一个空对象。如果我使用 readAsBinaryString，我会看到一堆二进制代码。

var file = document.getElementById('my_file').files[0],
    reader = new FileReader();

    reader.onloadend = function(e){
        console.log(e.target.result);
        $scope.image = e.target.result;
    }

    reader.readAsArrayBuffer(file);

我怎样才能看到我的文件，所以我知道它在使用 readAsArrayBuffer 时工作正常？ 如果需要更多代码，请告诉我！谢谢。

Answer 1

根据ArrayBuffer文档

您不能直接操作 ArrayBuffer 的内容；相反，您可以创建一个类型化数组对象或 DataView 对象，它以特定格式表示缓冲区，并使用它来读取和写入缓冲区的内容。

所以正如我之前评论的那样，console.log 可能不知道如何表示缓冲区，因此它只是输出arrayBuffer: {}。

如果您想在控制台中显示某些内容，您需要使用类型化数组或 DataView。例如使用Int8Array:

reader.onloadend = function (e) {
    console.log(e);
    console.log(new Int8Array(e.target.result));
};

见demo

Answer 2

如果要上传图片，则必须将其转换为 base64 格式。您可以通过使用画布元素或使用 Filereader 来完成。如果您使用的是 Filereader，那么您必须使用 readAsDataURL()

你可以参考 MDN https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsDataURL

你也可以使用画布元素 Convert an image to canvas that is already loaded