在前端开发中，我们经常需要上传文件。HTML5 提供了 FileReader API，可以将文件读取为二进制字符串，方便上传到后台服务器。本文将深入介绍 FileReader.readAsBinaryString() 方法的用法和注意事项，并提供示例代码。
什么是 FileReader.readAsBinaryString()？
FileReader.readAsBinaryString() 是 HTML5 中 FileReader API 的方法之一，它接收一个 File 或 Blob 对象作为参数，并将其内容读取为二进制字符串。这种类型的字符串适合用于上传文件至服务器。
使用 FileReader.readAsBinaryString() 的示例
以下是一个简单的示例，演示如何使用 FileReader.readAsBinaryString() 读取并上传一个图片文件：
-- -------------------- ---- ------- -- ------ ------ ----------- --------------- -- ----- --------- - ------------------------------------- ----- ---- - ------------------- ----- ------ - --- ------------- ------------- - --------------- - ----- ------------ - -------------------- -- ------------- ----------------------------- -- --------------------------------
在上述代码中，我们首先获取了一个 input 文件选择框元素，并从中选择了第一个文件（假设用户已经选择了一个文件）。然后，我们创建了一个新的 FileReader 实例，并使用 readAsBinaryString() 方法来读取文件内容。在读取完成后，onload 回调函数将被触发，并且我们将获得一个包含文件内容的二进制字符串。最后，我们可以调用自己封装的 uploadToServer() 函数将文件上传至服务器。
需要注意的是，FileReader.readAsBinaryString() 方法是异步的，因此我们必须使用 onload 回调函数来处理读取完成事件并获取结果。
一些注意事项
- FileReader.readAsBinaryString() 方法适用于小型文件的读取。对于大型文件（例如视频或音频文件），应该使用其他方法（如分块读取）。
- 在某些浏览器中（如 Safari），FileReader.readAsBinaryString() 会在读取二进制文件时出现问题。在这种情况下，我们建议使用其他替代方法，比如 FileReader.readAsArrayBuffer() 或 XMLHttpRequest.send()。
结论
通过 FileReader.readAsBinaryString() 方法，我们可以将任何类型的文件读取为二进制字符串，并方便地上传到服务器。当然，在实际项目中，要根据具体需求选择合适的读取方法，并且还需要考虑兼容性等因素。希望本文能够给你带来帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/13627