JavaScript - 文件上传，readAsArrayBuffer？

Question

我正在尝试上传文件到我的服务器，但我不太确定如何使用readAsArrayBuffer来完成。如果我使用readAsBinaryString，这种方法可以工作。

如果我尝试使用console.log打印结果，它只会返回'arrayBuffer: {}'。 当我尝试上传它后，我发现post请求只发送了一个空对象。如果我使用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时，我如何查看我的文件，以便知道它是否正常工作？如果需要更多代码，请让我知道！谢谢。

- Cheese Puffs

---

尝试记录缓冲区的长度 console.log(e.target.result.byteLength)。代码很可能是有效的，但是 ArrayBuffer 的控制台表示只有 arrayBuffer: {}，而不是一堆二进制内容。 - dreyescat

dreyescat - 谢谢，是的，现在我有一些输出了！ - Cheese Puffs

Answer 1

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

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

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

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

查看演示

- dreyescat

Answer 2

如果您想上传图像，则必须将其转换为base64格式。您可以使用canvas元素或使用Filereader来完成此操作。如果您正在使用Filereader，则必须使用readAsDataURL()。

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

另外，您也可以使用canvas元素 Convert an image to canvas that is already loaded

- Ajeet Lakhani

---

谢谢回复。是的，我计划使用fileReader。我将有一个带有一些输入字段（包括文件输入）的表单。然后我想用POST方法发送包括图像在内的表单数据。readAsDataURL仍然是正确的方法吗？ - Cheese Puffs

是的，为什么不呢？readAsDataURL只是将图像转换为base64格式字符串的一种方法。您可以将其存储在变量中并在表单中发布它，或者将其存储在数据库中。 - Ajeet Lakhani