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));
};

见演示

Answer 2

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

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

您也可以使用 canvas 元素 将图像转换为已加载的画布