L'utilisation des fonctions File et Blob de Javascript, et la création d'un serveur de téléchargement de fichiers

présenter

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

1. L'utilisation et la différence entre File et Blob

File()
(1) Fonction : Constructeur, crée une nouvelle instance d'objet File
(2) Syntaxe : var myFile = new File( bits, name, [ options] )
(3) Paramètres :

morceaux:

un Array contenant des objets ArrayBuffer , ArrayBufferView , Blob ou DOMString , ou toute combinaison de ces objets, qui est le contenu du fichier encodé en UTF-8 ;

Nom:

nom de fichier ou chemin d'accès au fichier ;

option：

Un objet options, contenant l'attribut optionnel
type : DOMString du fichier, représentant le type MIME du contenu à mettre dans le fichier. La valeur par défaut est ""
lastModified : valeur numérique représentant l'horodatage Unix (en millisecondes) de la dernière modification du fichier. La valeur par défaut est Date.maintenant().

Exemple:

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

Blob()
(1) Fonction : un objet Blob représente un objet de type fichier de données brutes immuable . Ses données peuvent être lues au format texte ou binaire , et peuvent également être converties en un ReadableStream (flux en lecture seule) pour la manipulation des données.
(2) Syntaxe : var aBlob = new Blob( array, options )
Renvoie un objet Blob nouvellement créé dont le contenu consiste en la concaténation des tableaux donnés dans les
paramètres (3) Paramètres :

déployer

Un tableau d'objets ArrayBuffer, ArrayBufferView, Blob, DOMString, etc., ou un mélange d'autres objets similaires, sera placé dans le Blob. Les DOMStrings seront encodés en UTF-8.

options

Un dictionnaire BlobPropertyBag facultatif, qui peut spécifier les deux propriétés suivantes :
(1) type, la valeur par défaut est "", qui représente le type MIME du contenu du tableau qui sera placé dans le blob ;
(2) fins, La valeur par défaut est "transparent", qui spécifie comment les chaînes contenant des fins de ligne \n sont écrites. Il s'agit de l'une des deux valeurs suivantes : "native", ce qui signifie que le terminateur de ligne sera remplacé par un caractère de saut de ligne adapté au système de fichiers du système d'exploitation hôte, ou "transparent", ce qui signifie que le terminateur stocké dans le blob restera inchangé.

Exemple:

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

2. Créez un fichier et téléchargez-le

Syntaxe de base :

nouveau fichier()
nouveau Blob()
URL.createObjectURL()
une balise déclenche le téléchargement

Blob créer un fichier et le télécharger

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. Autres méthodes : FileReader, createObjectURL, revokeObjectURL

Lecteur de fichiers

FileReader est principalement utilisé pour lire le contenu des fichiers dans la mémoire. Grâce à une série d'interfaces asynchrones, les fichiers locaux sont accessibles dans le thread principal.

Constructeur

var reader = new FileReader();

Les attributs

FileReader.error : indique qu'une erreur s'est produite lors de la lecture du fichier ;
FileReader.readyState : 0-aucune donnée n'a été chargée, 1-les données sont en cours de chargement, 2-toutes les demandes de lecture ont été effectuées ;
FileReader.result : Le contenu du fichier. Cette propriété n'est valide qu'une fois l'opération de lecture terminée, le format des données dépend de la méthode utilisée pour lancer l'opération de lecture.

un événement

FileReader.onabort : gère l'événement d'abandon. Cet événement est déclenché lorsque l'opération de lecture est interrompue ;
FileReader.onerror : gère l'événement d'erreur. Cet événement est déclenché lorsqu'une erreur se produit dans l'opération de lecture ;
FileReader.onload : gère l'événement de chargement. Cet événement est déclenché lorsque l'opération de lecture est terminée ;
FileReader.onloadstart : gère l'événement loadstart. Cet événement est déclenché lorsqu'une opération de lecture démarre ;
FileReader.onloadend : gère l'événement loadend. Cet événement se déclenche lorsque l'opération de lecture se termine (réussit ou échoue) ;
FileReader.onprogress : gère l'événement de progression. Cet événement se déclenche lorsque le blob est lu

méthode

FileReader.abort() : abandonne l'opération de lecture. Au retour, la propriété readyState est DONE ;
FileReader.readAsArrayBuffer() : commence à lire le contenu du Blob spécifié, une fois terminé, l'objet de données ArrayBuffer du fichier lu sera enregistré dans la propriété result ;
FileReader.readAsBinaryString() : commence à lire le contenu du blob spécifié. Une fois terminée, la propriété result contiendra les données binaires brutes du fichier lu, la méthode lit le fichier sous forme de chaîne binaire, généralement nous le transmettons au backend, et le backend peut stocker le fichier via cette chaîne ;
FileReader.readAsDataURL() : démarre la lecture du contenu du blob spécifié. Une fois terminée, la propriété de résultat contiendra une donnée : une chaîne au format URL représentant le contenu du fichier lu ;
FileReader.readAsText() : commence à lire le contenu du blob spécifié. Une fois terminée, la propriété result contiendra une chaîne représentant le contenu du fichier lu, la méthode a deux paramètres, le deuxième paramètre est l'encodage du texte, la valeur par défaut est UTF-8. Cette méthode est très simple à comprendre, le fichier est lu en mode texte, et le résultat de la lecture est le contenu du fichier texte.

URL.createObjectURL

grammaire

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

Le code ci-dessus générera une URL pour les données binaires. Cette URL peut être placée n'importe où une URL serait normalement placée, comme l'attribut src de la balise img. Il convient de noter que même avec les mêmes données binaires, chaque fois que la méthode URL.createObjectURL est appelée, une URL différente sera obtenue.

La durée d'existence de cette URL équivaut à la durée d'existence de la page Web. Une fois la page Web actualisée ou désinstallée, l'URL deviendra invalide. (Ce n'est pas comme File et Blob) De plus, vous pouvez également appeler manuellement la méthode URL.revokeObjectURL pour invalider l'URL.

URL.revokeObjectURL

Lorsque ces objets URL ne sont plus nécessaires, chacun doit être libéré en appelant la méthode URL.revokeObjectURL(). Le navigateur les libère automatiquement à la fermeture du document, mais pour des performances et une utilisation de la mémoire optimales, vous devez les libérer activement lorsque vous pouvez le faire en toute sécurité.

Références:

JS-front-end utilise Blob et File : https://www.its203.com/article/zhq2005095/89069851
Ajout de paramètre : https://segmentfault.com/a/1190000019902025
Description du paramètre : http://www.360doc. com/content/19/1007/11/13328254_865297350.shtmlMéthode de
téléchargement de fichiers, flux de documents : https://blog.csdn.net/jianleking/article/details/118442697