프런트엔드 파일 흐름 플라이 소개

coldplay.xixi

풀어 주다： 2020-10-30 17:31:50

앞으로

2987명이 탐색했습니다.

javascript 칼럼에서는 프런트엔드 파일 흐름 플라이를 소개합니다.

프런트엔드 파일 흐름 플라이 소개

Background

리더는 터미널의 기능에 의존하지 않고 로컬 분할 데이터의 분할 표시를 실현할 수 있는지에 대한 질문을 제기했습니다. 특별히 큰 성능 요구 사항이나 명확한 요구 사항이 없으면 일반적으로 모든 데이터가 한 번에 로드되고 렌더링됩니다. 그러나 데이터 양이 크거나 휴대폰 성능이 좋지 않으면 다른 문제가 발생합니다.

이 말을 듣고 혼란스러워 아무것도 몰랐는데 동료가 구현하고 간단한 데모를 작성했습니다

Front-end 구현

파일이 하나만 업로드된다고 가정

현재 파일 업로드 중 가장 일반적인 프런트엔드 방법은 입력 유형='파일'을 사용하는 것입니다(구현할 수 있는 DataTransfer 및 HTMLCanvasElement도 있지만 이는 소개되지 않습니다). File
파일이 성공적으로 업로드된 후 FileList 객체( event.target.files[0]이 반환됩니다. 텍스트 스트림을 포함하여 육안으로 볼 수 없는 모든 텍스트 관련 정보가 포함되어 있습니다.)

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

File接口是基于Blod，所以Blod有的属性和方法，File也会有，比如slice=> 截取源 Blob 对象中指定范围内的数据，text=>返回一个promise且包含blob所有内容的UTF-8格式（就是把我们blod转化为我们可以读懂的utf-8的格式）

  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);复制代码

로그인 후 복사

既然FileList 对象继承于Blod对象，Blod对象对象又有slice和text方法。所以之前的那个需求就很好实现了

具体实现我还么有写，思路到这里，日后补上

Blob

Blob/slice

File

Input/file

其他与流有关的API

我记得很早之前写过不借助端的力量实现本地上传预览图片音频文件，那个时候就有提到过用过Blod对象，FileReader对象，还有createObjectURL，但是这一次恰好可以把这些都整合起来，一起说一下

var aBlob = new Blob( array, options );

  <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('日志下载成功')
  };复制代码

로그인 후 복사

FileList 개체는 Blod 개체의 경우를 상속하므로 Blod 개체에는 슬라이스 및 텍스트 메서드도 있습니다. 그래서 이전 요구 사항은 쉽게 구현되었습니다

기타 스트림 관련 API

터미널의 전원을 사용하지 않고 로컬에서 미리보기 이미지와 오디오 파일을 업로드하는 방법을 오래 전에 쓴 기억이 납니다. Blod 개체, FileReader 개체 및 createObjectURL이 있는데 이번에는 모두 통합할 수 있으니 함께 이야기해 보겠습니다

`var aBlob = new Blob(array, options);`

Parameters , 배열은 ArrayBuffer, ArrayBufferView, Blob, DOMString 및 기타 개체의 조합이거나 다른 유사한 개체의 혼합으로 Blob에 저장됩니다. DOMString은 UTF-8로 인코딩됩니다. 옵션은 도입되지 않았습니다. Blob 개체는 변경 불가능한 원시 데이터 파일 형식 개체를 나타냅니다. 해당 데이터는 텍스트 또는 바이너리 형식으로 읽거나 데이터 작업을 위해 ReadableStream으로 변환할 수 있습니다.

=> 이런 식으로 우리는 새로운 Blod를 통해 텍스트 조각을 Blod 개체로 변환할 수 있다는 것을 알고 있습니다

질문: Blod는 무엇을 할 수 있나요? ?

그런 다음 어떤 개체를 사용하여 작업을 수행할 수 있는지에 따라 다릅니다.

특정 텍스트를 다운로드하거나 웹페이지에 로그인하세요.

URL.createObjectURL() 그녀의 매개 변수는 Blod 개체이며, 결합할 수 있는 URL을 만드는 데 사용됩니다. a 요소 다운로드 속성은 로그 또는 텍스트 다운로드를 구현합니다

<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>复制代码

로그인 후 복사

업로드된 사진의 로컬 미리보기

필요에 따라 사진을 img 태그로 표시하거나 캔버스로 그릴 수 있습니다

또한 새로운 API를 배웠습니다 = >FileReader
FileReader 쓰다가 발견했습니다이런 글들은 이전 글에도 사용된 내용인데 기억나지 않거나 잊어버린 글인데 반복률이 높은 또 다른 글입니다. 물체와 그 주변 환경에 속성을 부여하면 많은 일을 할 수 있습니다. 정리하고 리뷰해 보니 정말 많은 것들이 재사용될 수 있다는 것, 혹은 어떤 기반에서 확장하고 승화시키면 많은 의미 있는 일들이 가능하다는 것을 알게 되었습니다. 저는 프런트 엔드에서 로컬 데이터 및 스트림과 관련된 지식 포인트를 더 명확하게 깨달았습니다. 이러한 지식 포인트는 모두 MediaSource 개체
ReadableStream과 관련되어 있습니다.

위 내용은 프런트엔드 파일 흐름 플라이 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!