Introducing the front-end file flow flie

coldplay.xixi

Release： 2020-10-30 17:31:50

forward

2957 people have browsed it

javascriptThe column introduces the front-end file flow flie.

Introducing the front-end file flow flie

Background

The leader raised a question, whether it is possible to realize segmented display of local segmented data without resorting to the terminal's capabilities. In the absence of particularly large performance requirements or clear requirements, all data is generally loaded and rendered at once. However, if the amount of data is large or the mobile phone performance is poor, there will be other problems.

I was confused when I heard this. I didn’t know anything, but my colleague implemented it and wrote a simple demo

Front-end implementation

Assume that only one file is uploaded

The most common way to upload files on the front-end is to use input type='file' (there are also DataTransfer and HTMLCanvasElement that can be implemented, which will not be introduced) File
After the file is uploaded successfully, a FileList object will be returned (event.target.files[0] contains all text-related information, including text streams, which may not be visible to the naked eye)

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

File interface It is based on Blod, so File will also have the properties and methods that Blod has. For example, slice=> intercepts the data within the specified range in the source Blob object, text=> returns a promise and contains the UTF-8 format of all the contents of the blob. (That is to convert our blod into a utf-8 format that we can read)

  const fileDate = event.target.files[0]
  let text = await fileDate.slice(1, 10).text()
  console.log('[截取一段Blod对象]', fileDate.slice(1, 10));
  console.log('[Blod对象转化为文本]', text);复制代码

Copy after login

Since the FileList object inherits from the Blod object, the Blod object also has slice and text methods. So the previous requirement has been easily realized.

I haven’t written the specific implementation yet. This is the idea. I will add it in the future.

Blob

Blob/slice

File

Input/file

Other stream-related APIs

I remember writing a long time ago about uploading preview images locally without using the power of the terminal. Audio files, at that time, we mentioned using Blod objects, FileReader objects, and createObjectURL, but this time we can just integrate them all, let’s talk about them together

var aBlob = new Blob (array, options);

Parameters, array is an Array composed of ArrayBuffer, ArrayBufferView, Blob, DOMString and other objects, or a mixture of other similar objects, which will be put into the Blob. DOMStrings will be encoded as UTF-8. Options are not introduced

The Blob object represents an immutable, raw data file-like object. Its data can be read in text or binary format, or converted into a ReadableStream for data operations.

=> In this way, we know that a piece of text can be converted into a Blod object through new Blod.

Question: What can Blod do? ?

Then it depends on which objects can be used to do some things

Download a certain text or log in the webpage

URL.createObjectURL() Her parameter is the Blod object , used to create a url; it can be combined with the download attribute of the a element to download a log or text

  <buttom onclick="onCopyHandle()">复制文本 </buttom>
 function onCopyHandle() { // 创建隐藏的可***链接
    let content = `
    name: sunseekers
    role: student
    houseName: shanghai
    url: https://github.com/sunseekers
    userAgent: ${navigator.userAgent}
    log:'这里是日志内容'
    `.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); // 字符内容转变成blob地址

    document.body.appendChild(eleLink);
    eleLink.click(); // 触发点击
    document.body.removeChild(eleLink); // 然后移除

    Message.success('日志下载成功')
  };复制代码

Copy after login

Local preview of uploaded images

The image can be displayed with the img tag or drawn with canvas , look at the requirements

<body>
  <p class="index">
    <input type="file" value="上传文件">
    <img width="100" height="100"></img>
  </p>
</body>
<script>
  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 after login

I learned a new API=>FileReader

FileReader

After writing, I found out

It turns out that these are in the previous article I have used them all but I didn’t remember them, or they were forgotten. This is another article with a high repetition rate. When you attribute properties to an object and its surroundings, you can do a lot of things. After doing a summary and review, it feels very different. It turns out that many things can be reused, or that by expanding and sublimating on a certain basis, many meaningful things can be done. For me, I once again realized more clearly the knowledge points related to the front-end and local data and streams.

I can continue to expand my knowledge points in the future. These are all related to streams

MediaSource Object

ReadableStream

Streams API

ArrayBuffer

##Related free learning recommendations: javascript(Video)

The above is the detailed content of Introducing the front-end file flow flie. For more information, please follow other related articles on the PHP Chinese website!