리더는 터미널의 기능에 의존하지 않고 로컬 분할 데이터의 분할 표시를 실현할 수 있는지에 대한 질문을 제기했습니다. 특별히 큰 성능 요구 사항이나 명확한 요구 사항이 없으면 일반적으로 모든 데이터가 한 번에 로드되고 렌더링됩니다. 그러나 데이터 양이 크거나 휴대폰 성능이 좋지 않으면 다른 문제가 발생합니다.
이 말을 듣고 혼란스러워 아무것도 몰랐는데 동료가 구현하고 간단한 데모를 작성했습니다
파일이 하나만 업로드된다고 가정
현재 파일 업로드 중 가장 일반적인 프런트엔드 방법은 입력 유형='파일'을 사용하는 것입니다(구현할 수 있는 DataTransfer 및 HTMLCanvasElement도 있지만 이는 소개되지 않습니다). File
파일이 성공적으로 업로드된 후 FileList 객체( event.target.files[0]이 반환됩니다. 텍스트 스트림을 포함하여 육안으로 볼 수 없는 모든 텍스트 관련 정보가 포함되어 있습니다.)
console.log('[FileList object] :',event.target.files[0])
console.log('[FileList 对象]:',event.target.files[0])
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);复制代码
具体实现我还么有写,思路到这里,日后补上
Blob
Blob/slice
File
Input/file
我记得很早之前写过不借助端的力量实现本地上传预览图片音频文件,那个时候就有提到过用过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 개체에는 슬라이스 및 텍스트 메서드도 있습니다. 그래서 이전 요구 사항은 쉽게 구현되었습니다
아직 구체적인 구현을 작성하지 않았습니다. 아이디어는 여기서 끝나고 나중에 추가하겠습니다BlobBlob/sliceFileInput/file터미널의 전원을 사용하지 않고 로컬에서 미리보기 이미지와 오디오 파일을 업로드하는 방법을 오래 전에 쓴 기억이 납니다. Blod 개체, FileReader 개체 및 createObjectURL이 있는데 이번에는 모두 통합할 수 있으니 함께 이야기해 보겠습니다
var aBlob = new Blob(array, options);
Parameters , 배열은 ArrayBuffer, ArrayBufferView, Blob, DOMString 및 기타 개체의 조합이거나 다른 유사한 개체의 혼합으로 Blob에 저장됩니다. DOMString은 UTF-8로 인코딩됩니다. 옵션은 도입되지 않았습니다. Blob 개체는 변경 불가능한 원시 데이터 파일 형식 개체를 나타냅니다. 해당 데이터는 텍스트 또는 바이너리 형식으로 읽거나 데이터 작업을 위해 ReadableStream으로 변환할 수 있습니다.
질문: 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!