프런트엔드 파일 흐름 플라이 소개
- coldplay.xixi앞으로
- 2020-10-30 17:31:502897검색
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 );
- File 인터페이스는 Blod를 기반으로 하므로 Blod가 가지고 있는 속성과 메소드, File도 슬라이스와 같은 것을 갖게 됩니다. => 소스 Blob 객체의 지정된 범위 내의 데이터를 가로챕니다. text => Blob의 모든 내용을 포함하는 UTF-8 형식의 Promise를 반환합니다(즉, Blob을 UTF-8 형식으로 변환하여 읽을 수 있습니다)
<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 개체에는 슬라이스 및 텍스트 메서드도 있습니다. 그래서 이전 요구 사항은 쉽게 구현되었습니다
아직 구체적인 구현을 작성하지 않았습니다. 아이디어는 여기서 끝나고 나중에 추가하겠습니다BlobBlob/sliceFileInput/file 기타 스트림 관련 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 태그로 표시하거나 캔버스로 그릴 수 있습니다
rrreee또한 새로운 API를 배웠습니다 = >FileReaderReadableStream과 관련되어 있습니다.🎜Streams API🎜🎜ArrayBuffer🎜🎜🎜🎜관련 무료 학습 권장 사항: 🎜🎜🎜javascript🎜🎜🎜(동영상) 🎜🎜🎜
위 내용은 프런트엔드 파일 흐름 플라이 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!