Javascript의 File 및 Blob 기능 사용 및 파일 업로드 서버 생성

개요

1.File 和Blob 的使用和区别
2.创建文件并上传
3.其他方法：FileReader、createObjectURL、revokeObjectURL

1. File과 Blob의 용도와 차이점

File()
(1) 기능: 생성자, 새로운 File 객체 인스턴스 생성
(2) 구문: var myFile = new File( bits, name, [ options] )
(3) 매개변수:

비트:

ArrayBuffer , ArrayBufferView , Blob 또는 DOMString 객체 또는 이러한 객체의 조합을 포함하는 배열 (UTF-8로 인코딩된 파일 콘텐츠)

이름:

파일 이름 또는 파일 경로;

옵션:

선택적 속성 유형을 포함하는 옵션 객체
: 파일에 넣을 콘텐츠의 MIME 유형을 나타내는 파일의 DOMString. 기본값은 ""입니다.
lastModified: 파일이 마지막으로 수정된 Unix 타임스탬프(밀리초)를 나타내는 숫자 값입니다. 기본값은 Date.now()입니다.

예시:

var file = new File(['Hello', '\n World'], 'hello-world.txt', {
    
    type: 'text/plain'})

Blob()
(1) 기능: Blob 객체는 불변의 원시 데이터 파일과 같은 객체 를 나타냅니다 . 해당 데이터는 텍스트 또는 이진 형식으로 읽을 수 있으며 데이터 조작을 위해 ReadableStream (읽기 전용 스트림) 으로 변환할 수도 있습니다 .
(2) 구문: var aBlob = new Blob( array, options )
내용이 매개변수에 제공된 배열의 연결로 구성된 새로 생성된 Blob 객체를 반환합니다.
(3) 매개변수:

정렬

ArrayBuffer, ArrayBufferView, Blob, DOMString 등 개체의 배열 또는 기타 유사한 개체의 혼합이 Blob에 배치됩니다. DOMString은 UTF-8로 인코딩됩니다.

옵션

다음 두 가지 속성을 지정할 수 있는 선택적 BlobPropertyBag 사전: (1) 유형, 기본값
은 blob에 넣을 배열 콘텐츠의 MIME 유형을 나타내는 ""입니다.
줄 종결자 \n을 포함하는 문자열을 작성하는 방법을 지정하는 "투명"입니다. 두 값 중 하나입니다. "native"는 줄 종결자가 호스트 운영 체제의 파일 시스템에 적합한 줄 바꿈 문자로 변경됨을 의미하거나 "transparent"는 blob에 저장된 종결자가 변경되지 않은 상태로 유지됨을 의미합니다.

예시:

var blob = new Blob(['jyjin',  ' can always shock me!'])

2. 파일 생성 및 업로드

핵심 구문:

새로운 파일()
새로운 블롭()
URL.createObjectURL()
태그가 다운로드를 트리거합니다.

Blob 생성 파일 및 다운로드

downloadFile(fileName, content)

function downloadFile(fileName, content) {
    
    
  // 定义触发事件的DOM
  var aLink = document.createElement('a');
  // 定义BLOB对象，声明文件内容
  var blob = new Blob([content, 'jyjin']);
  // 判定平台
  var isMac = navigator.userAgent.indexOf('Mac OS') > -1;
  // 定义事件对象 
  var evt = document.createEvent(isMac ? "MouseEvents" : "HTMLEvents");
  // 初始化事件
  // evt.initEvent("click", false, false);
  evt[isMac ? "initMouseEvent" : "initEvent"]("click", false, false);
  // 定义下载文件名称
  aLink.download = fileName;
  // 根据上面定义的 BLOB 对象创建文件 dataURL
  // URL.createObjectURL()
  aLink.href = URL.createObjectURL(blob);
  // 触发事件下载
  aLink.dispatchEvent(evt);
}

3. 기타 메소드: FileReader, createObjectURL, invokeObjectURL

파일리더

FileReader는 주로 파일 내용을 메모리로 읽는 데 사용되며, 일련의 비동기 인터페이스를 통해 기본 스레드에서 로컬 파일에 액세스할 수 있습니다.

건설자

var reader = new FileReader();

속성

FileReader.error: 파일을 읽는 동안 오류가 발생했음을 나타냅니다.
FileReader.readyState: 0-데이터가 로드되지 않음, 1-데이터가 로드 중, 2-모든 읽기 요청이 완료되었습니다.
FileReader.result: 파일의 내용입니다. 이 속성은 읽기 작업이 완료된 후에만 유효하며 데이터 형식은 읽기 작업을 시작하는 데 사용된 방법에 따라 다릅니다.

이벤트

FileReader.onabort: 중단 이벤트를 처리합니다. 이 이벤트는 읽기 작업이 중단될 때 트리거됩니다.
FileReader.onerror: 오류 이벤트를 처리합니다. 이 이벤트는 읽기 작업에서 오류가 발생하면 시작됩니다.
FileReader.onload: 로드 이벤트를 처리합니다. 이 이벤트는 읽기 작업이 완료되면 시작됩니다.
FileReader.onloadstart: loadstart 이벤트를 처리합니다. 이 이벤트는 읽기 작업이 시작될 때 시작됩니다.
FileReader.onloadend: loadend 이벤트를 처리합니다. 이 이벤트는 읽기 작업이 종료될 때 발생합니다(성공 또는 실패).
FileReader.onprogress: 진행 이벤트를 처리합니다. 이 이벤트는 Blob을 읽을 때 발생합니다.

방법

FileReader.abort(): 읽기 작업을 중단합니다. 반환 시 readyState 속성은 DONE입니다.
FileReader.readAsArrayBuffer(): 지정된 Blob의 내용을 읽기 시작하고 완료되면 읽은 파일의 ArrayBuffer 데이터 개체가 result 속성에 저장됩니다.
FileReader.readAsBinaryString(): 지정된 blob의 내용을 읽기 시작합니다. 완료되면 결과 속성에는 읽기 파일의 원시 이진 데이터가 포함되고 메서드는 파일을 이진 문자열로 읽습니다. 일반적으로 백엔드에 전달하고 백엔드는 이 문자열을 통해 파일을 저장할 수 있습니다.
FileReader.readAsDataURL(): 지정된 blob의 내용을 읽기 시작합니다. 완료되면 결과 속성에 다음 데이터가 포함됩니다. 읽은 파일의 내용을 나타내는 URL 형식 문자열.
FileReader.readAsText(): 지정된 blob의 내용을 읽기 시작합니다. 완료되면 결과 속성에는 읽은 파일의 내용을 나타내는 문자열이 포함되고 메서드에는 두 개의 매개변수가 있으며 두 번째 매개변수는 텍스트 인코딩이고 기본값은 UTF-8입니다. 이 방법은 매우 이해하기 쉬우며, 파일을 텍스트 모드로 읽어서 읽은 결과가 텍스트 파일의 내용입니다.

URL.createObjectURL

문법

//blob参数是一个File对象或者Blob对象.
var objecturl =  window.URL.createObjectURL(blob);

위의 코드는 바이너리 데이터에 대한 URL을 생성합니다. 이 URL은 img 태그의 src 속성과 같이 일반적으로 URL이 배치되는 모든 위치에 배치할 수 있습니다. 동일한 바이너리 데이터를 사용하더라도 URL.createObjectURL 메소드가 호출될 때마다 다른 URL이 획득된다는 점에 유의해야 합니다.

이 URL의 존재 시간은 웹 페이지의 존재 시간과 동일하며 웹 페이지를 새로 고치거나 제거하면 URL이 무효화됩니다. (File 및 Blob과 다름) 또한 URL을 무효화하기 위해 URL.revokeObjectURL 메서드를 수동으로 호출할 수도 있습니다.

URL.revokeObjectURL

이러한 URL 객체가 더 이상 필요하지 않으면 URL.revokeObjectURL() 메서드를 호출하여 각각을 해제해야 합니다. 브라우저는 문서가 종료될 때 자동으로 해제하지만 최적의 성능과 메모리 사용을 위해 안전할 때 적극적으로 해제해야 합니다.

참조:

JS-front-end는 Blob 및 파일 사용: https://www.its203.com/article/zhq2005095/89069851
매개변수 추가: https://segmentfault.com/a/1190000019902025
매개변수 설명: http://www.360doc. com/content/19/1007/11/13328254_865297350.shtml파일
업로드 방법, 문서 흐름: https://blog.csdn.net/jianleking/article/details/118442697