background

The leader put forward a question, can not rely on the ability of the terminal, realize the local segment read data segment display. Loading and rendering all the data at once is common when there is no particularly high performance requirement or explicit requirement, but if there is a large amount of data or the performance of the phone is not good, there are other issues.

I had no idea when I heard this, but my colleague implemented it and wrote a simple demo

Front-end implementation

Suppose only one file is uploaded

  1. Type =’file’ (DataTransfer and HTMLCanvasElement can be implemented, not introduced) file

  2. If the file is uploaded successfully, a FileList object is returned (Event.target. files[0] contains all information about the text, including the text stream, which may not be visible to the naked eye).

The console. The log (' [FileList object] : 'the event. The target. The files [0])

  1. The File interface is based on Blob, so the Blob has properties and methods that File also has, such as slice=> intercepts data within a specified range in the source Blob object, Text => Returns a UTF-8 format containing all the contents of the BLOB (that is, converting our bloB into utF-8 format that we can read)
Const fileDate = event.target.files[0] let text = await filedate.slice (1, 10).text() console.log('[intercepts a Blob object]', fileDate.slice(1, 10)); Console. log('[Blob object converted to text]', text);Copy the code
  1. Since FileList objects inherit from Blob objects, Blob objects have slice and text methods. So the previous requirement was perfectly fulfilled

Specific implementation I have not written, ideas here, in the future to fill

Blob

Blob/slice

File

Input/file

Other stream-related apis

I remember writing a long time ago about uploading preview images and audio files locally without the power of the end. I mentioned using Blob objects, FileReader objects, and createObjectURL back then, but this time it’s nice to put it all together

var aBlob = new Blob( array, options );

Parameter, Array is an array made up of objects such as ArrayBuffer, ArrayBufferView, Blob, DOMString, etc., or a mixture of similar objects that will be put into the Blob. DOMStrings will be encoded to UTF-8. Options will not be introduced

A Blob object represents an immutable, raw data-like file object. Its data can be read in text or binary format, or converted to ReadableStream for data manipulation.

We know that text can be converted into Blob objects via new Blob

What can the Blob do?

It depends on who can do something with it

Download a text or log from a web page

Url.createobjecturl () takes the Blob object to create a URL; You can use the download attribute of the A element to download a log or text

<buttom onclick="onCopyHandle()" </buttom> function onCopyHandle() { sunseekers role: student houseName: shanghai url: https://github.com/sunseekers userAgent: ${navigator.userAgent} log:' here is the log content '. Trim (); let filename = 'logFiles.md' const eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; const blob = new Blob([content]); eleLink.href = URL.createObjectURL(blob); / / character contents into a blob address document. The body. The appendChild (eleLink); eleLink.click(); / / triggered by clicking on the document. The body. RemoveChild (eleLink); // Then remove message.success (' log downloaded successfully ')};Copy the code

Local preview uploads images

Images can be displayed with img tags or drawn with Canvas, depending on your needs

<body> <div class="index"> <input type="file" value=" upload file" >< img width="100" height="100">  let inputEle = document.querySelector("input") let img = document.querySelector("img") inputEle.addEventListener('change', async function (event) { const fileDate = event.target.files[0] const fileReader = new FileReader() fileReader.readAsDataURL(fileDate) fileReader.onload = e => { img.src = e.target.result } }) </script>Copy the code

Learn a new API=>FileReader

FileReader

Finish the found

It turns out that all of these were useful in the previous article, but I didn’t think of them, or they were forgotten. This is another article with a high repetition rate. There’s a lot you can do about an object and its surrounding properties. A summary is different from a review. Many things can be reused, or expanded and sublimated on a certain basis, and many meaningful things can be done. Once again, I became more aware of the front-end and local data flow related knowledge points

You can continue to expand your knowledge in the future, which is all about flow

MediaSource object

ReadableStream

Streams API

ArrayBuffer

Welcome to follow my blog will be the first time to update, share what you learn and think