El uso de las funciones File y Blob de Javascript, y la creación de un servidor de carga de archivos

contorno

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

1. El uso y la diferencia entre Archivo y Blob

Archivo ()
(1) Función: Constructor, crea una nueva instancia de objeto de archivo
(2) Sintaxis: var myFile = new File( bits, name, [ options] )
(3) Parámetros:

bits:

un Array que contiene objetos ArrayBuffer , ArrayBufferView , Blob o DOMString , o cualquier combinación de estos objetos, que es el contenido del archivo codificado en UTF-8;

nombre:

nombre de archivo o ruta de archivo;

opciones:

Un objeto de opciones, que contiene el
tipo de atributo opcional: DOMString del archivo, que representa el tipo MIME del contenido que se colocará en el archivo. El valor predeterminado es ""
lastModified: valor numérico que representa la marca de tiempo de Unix (en milisegundos) de cuándo se modificó el archivo por última vez. El valor predeterminado es Fecha.ahora().

Ejemplo:

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

Blob() (1) Función: un objeto Blob representa un objeto inmutable similar a un archivo de
datos sin procesar . Sus datos se pueden leer en formato de texto o binario , y también se pueden convertir en un ReadableStream (flujo de solo lectura) para la manipulación de datos. (2) Sintaxis: Devuelve un objeto Blob recién creado cuyo contenido consiste en la concatenación de las matrices dadas en los parámetros (3) Parámetros:
var aBlob = new Blob( array, options )

formación

Una matriz de objetos ArrayBuffer, ArrayBufferView, Blob, DOMString, etc., o una combinación de otros objetos similares, se colocará en el Blob. DOMStrings se codificará como UTF-8.

opciones

Un diccionario BlobPropertyBag opcional, que puede especificar las siguientes dos propiedades:
(1) tipo, el valor predeterminado es "", que representa el tipo MIME del contenido de la matriz que se colocará en el blob;
(2) terminaciones, el valor predeterminado es "transparente", que especifica cómo se escriben las cadenas que contienen terminadores de línea \n. Es uno de dos valores: "nativo", lo que significa que el terminador de línea se cambiará a un carácter de nueva línea adecuado para el sistema de archivos del sistema operativo host, o "transparente", lo que significa que el terminador almacenado en el blob permanecerá sin cambios.

Ejemplo:

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

2. Crea un archivo y súbelo

Sintaxis principal:

archivo nuevo()
nuevo blob()
URL.createObjectURL()
una etiqueta activa la descarga

Blob crear archivo y descargar

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. Otros métodos: FileReader, createObjectURL, revocarObjectURL

Lector de archivos

FileReader se utiliza principalmente para leer el contenido de los archivos en la memoria. A través de una serie de interfaces asincrónicas, se puede acceder a los archivos locales en el subproceso principal.

Constructor

var reader = new FileReader();

Atributos

FileReader.error: Indica que ocurrió un error al leer el archivo;
FileReader.readyState: 0: no se han cargado datos, 1: se están cargando datos, 2: se han completado todas las solicitudes de lectura;
FileReader.result: El contenido del archivo. Esta propiedad solo es válida después de que se completa la operación de lectura, el formato de los datos depende del método que se utilizó para iniciar la operación de lectura.

evento

FileReader.onabort: maneja el evento de cancelación. Este evento se activa cuando se interrumpe la operación de lectura;
FileReader.onerror: maneja el evento de error. Este evento se dispara cuando ocurre un error en la operación de lectura;
FileReader.onload: maneja el evento de carga. Este evento se activa cuando se completa la operación de lectura;
FileReader.onloadstart: maneja el evento de inicio de carga. Este evento se activa cuando se inicia una operación de lectura;
FileReader.onloadend: maneja el evento de carga. Este evento se activa cuando finaliza la operación de lectura (ya sea exitosa o fallida);
FileReader.onprogress: maneja el evento de progreso. Este evento se activa cuando se lee el blob

método

FileReader.abort(): cancela la operación de lectura. A la vuelta, la propiedad readyState está TERMINADA;
FileReader.readAsArrayBuffer(): Comience a leer el contenido del Blob especificado, una vez completado, el objeto de datos ArrayBuffer del archivo leído se guardará en la propiedad de resultado;
FileReader.readAsBinaryString(): comienza a leer el contenido del blob especificado. Una vez completada, la propiedad de resultado contendrá los datos binarios sin procesar del archivo leído, el método lee el archivo como una cadena binaria, generalmente lo pasamos al backend, y el backend puede almacenar el archivo a través de esta cadena;
FileReader.readAsDataURL(): comience a leer el contenido del blob especificado. Una vez completada, la propiedad de resultado contendrá una cadena con formato de datos: URL que representa el contenido del archivo leído;
FileReader.readAsText(): comienza a leer el contenido del blob especificado. Una vez completada, la propiedad de resultado contendrá una cadena que representa el contenido del archivo leído, el método tiene dos parámetros, el segundo parámetro es la codificación del texto, el valor predeterminado es UTF-8. Este método es muy fácil de entender, el archivo se lee en modo texto y el resultado de la lectura es el contenido del archivo de texto.

URL.createObjectURL

gramática

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

El código anterior generará una URL para los datos binarios. Esta URL se puede colocar en cualquier lugar donde normalmente se colocaría una URL, como el atributo src de la etiqueta img. Cabe señalar que incluso con los mismos datos binarios, cada vez que se llame al método URL.createObjectURL, se obtendrá una URL diferente.

El tiempo de existencia de esta URL es equivalente al tiempo de existencia de la página web. Una vez que se actualice o desinstale la página web, la URL dejará de ser válida. (No es como Archivo y Blob) Además, también puede llamar manualmente al método URL.revokeObjectURL para invalidar la URL.

URL.revokeObjectURL

Cuando estos objetos de URL ya no son necesarios, cada uno debe liberarse llamando al método URL.revokeObjectURL(). El navegador los liberará automáticamente cuando salga el documento, pero para un rendimiento y un uso de la memoria óptimos, debe liberarlos activamente cuando sea seguro hacerlo.

Referencias:

JS-front-end usa Blob y File: https://www.its203.com/article/zhq2005095/89069851
Adición de parámetros: https://segmentfault.com/a/1190000019902025
Descripción de parámetros: http://www.360doc. com/ content/19/1007/11/13328254_865297350.shtmlMétodo de
carga de archivos, flujo de documentos: https://blog.csdn.net/jianleking/article/details/118442697