如何选择FileReader的阅读方法？

Question

While making a simple picture uploader, I am learning about FileReader API. There are 4 formats, which are array buffer, binary string, data URL, and text, to upload a file, and I would like to know how to pick one.

Among few articles, this says that data URL is good when you want to show the uploaded picture and array buffer is good when you manipulate the file. What do you think? And, when is a good occasion to choose binary string or text formats?

Answer 1

For a "File Uploader", you should simply not use a FileReader at all.

You don't need to read the file to be able to upload it, you can send it as a Blob directly .

If you need to display it in the current page, you still don't need a FileReader, create a blobURI from the Blob , which will point directly to the File on disk, with no useless memory bloating.

 inp.onchange = e => { // yes that's all synchronous... const url = URL.createObjectURL(inp.files[0]); const img = new Image(); img.src = url; document.body.appendChild(img); }; 

 <input type="file" id="inp" accept="image/*"> 

---

The only use cases for a FileReader is when you need to access the content of the File, for instance,

• if you want to load a text file (or csv, or json) and parse it, then you will use the readAsText() method.
• if you want to read/edit some binary file (eg read meta-data of a JPEG file?), then you'll use readAsArrayBuffer() , and work from this buffer.
• readAsDataURL() is unfortunately too much misused, As said previously, in 99% of the cases, what you'll do from this dataURI could be done with a blobURI, or the Blob directly. The only one case I can see for it, is to append binary data in some standalone document... Or, something that doesn't happen everyday on every website...
• readAsBinaryString() is rather useless, and had even been removed form the standards. If you really need a binary string representation of your File, you can generate one from an ArrayBuffer, but what you'll do with this String is a mystery. (work with ArrayBuffer directly).