javascript présente le flux de fichiers frontal.

Présentation du flux de fichiers front-end flie

Contexte

Le dirigeant a soulevé la question de savoir s'il est possible de réaliser un affichage segmenté de données de lecture segmentées locales sans recourir aux capacités du terminal. En l'absence d'exigences de performances particulièrement importantes ou d'exigences claires, toutes les données sont généralement chargées et restituées en même temps. Cependant, si la quantité de données est importante ou si les performances du téléphone mobile sont médiocres, d'autres problèmes surviendront.

J'étais confus quand j'ai entendu cela, je ne savais rien, mais mon collègue l'a implémenté et a écrit une démo simple

Implémentation frontale

Supposons qu'il n'y en ait qu'une. le fichier est téléchargé

Actuellement, la manière la plus courante de télécharger un fichier sur le front-end est d'utiliser input type='file' (il existe également DataTransfer et HTMLCanvasElement qui peuvent être implémenté, qui ne sera pas introduit) File
Une fois le fichier téléchargé avec succès, un objet FileList sera renvoyé (event.target.files[0] contient toutes les informations liées au texte, y compris le flux de texte, qui peut ne pas être visible à l'œil nu)

console.log('[FileList 对象]:',event.target.files[0])

L'interface File est basée sur Blod, donc File sera également avoir les propriétés et les méthodes de Blod, telles que slice=> intercept source Les données dans la plage spécifiée dans l'objet Blob, text=> renvoie une promesse et contient le format UTF-8 de tout le contenu du blob ( c'est-à-dire convertir notre blob dans un format UTF-8 que nous pouvons lire)

  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);复制代码

Copier après la connexion

Puisque l'objet FileList hérite de l'objet Blod, l'objet Blod a également des méthodes slice et text. L'exigence précédente a donc été facilement réalisée

Je n'ai pas encore écrit l'implémentation spécifique. C'est tout, je l'ajouterai à l'avenir

Blob

. Blob/slice

Fichier

Input/file

Autres API liées aux flux

Je me souviens avoir écrit il y a longtemps sur le téléchargement d'images d'aperçu localement sans utiliser la puissance du terminal. Pour les fichiers audio, nous avions mentionné à l'époque l'utilisation des objets Blod, des objets FileReader et createObjectURL, mais cette fois, nous pouvons simplement les intégrer tous et en parler ensemble

var aBlob = new Blob( array, options );

Paramètre, tableau est un tableau composé de ArrayBuffer, ArrayBufferView, Blob, DOMString et d'autres objets, ou un mélange d'autres objets similaires, qui seront placés dans le Blob. Les DOMStrings seront codées en UTF-8. Les options n'introduisent pas

L'objet Blob représente un objet immuable semblable à un fichier de données brutes. Ses données peuvent être lues au format texte ou binaire, ou converties en ReadableStream pour les opérations sur les données.

=> De cette façon, nous savons qu'un morceau de texte peut être converti en objet Blod via le nouveau Blod

Question : Que peut faire Blod ? ?

Ensuite, cela dépend des objets qui peuvent être utilisés pour faire quelque chose

Téléchargez un certain texte ou connectez-vous à la page Web

URL.createObjectURL() Son paramètre est le Blod object , utilisé pour créer une URL ; il peut être combiné avec l'attribut download de l'élément a pour télécharger un journal ou un texte

  <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('日志下载成功')
  };复制代码

Copier après la connexion

Aperçu local de l'image téléchargée

L'image peut être affichée avec la balise img ou dessiné avec canvas , selon la demande

<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>复制代码

Copier après la connexion

J'ai appris une nouvelle API=>FileReader

FileReader

Après l'avoir écrite, je l'ai trouvée

Il s'avère que ceux-ci sont dans l'article précédent. Je les ai tous utilisés mais je ne m'en souviens pas, ou ils ont été oubliés. C'est un autre article avec un taux de répétition élevé. Lorsque vous attribuez des propriétés à un objet et à son environnement, vous pouvez faire beaucoup de choses. Après avoir fait un résumé et une révision, c'est très différent. Il s'avère que beaucoup de choses peuvent être réutilisées, ou qu'en élargissant et en sublimant sur une certaine base, beaucoup de choses significatives peuvent être faites. Pour moi, j'ai une fois de plus réalisé plus clairement les points de connaissances liés aux données et flux front-end et locaux