Problèmes d'obtention de la taille de téléchargement des images compressées de chemin dans Webpack (tutoriel détaillé)

Ci-dessous, je partagerai avec vous une brève discussion sur la question de l'obtention de la taille de téléchargement des images compressées à l'aide des chemins Webpack. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

La cause du problème est que la taille de mon image est plus grande que la taille standard du chargeur d'URL, ce qui amène Webpack à compresser automatiquement le chemin de l'image, ce qui m'empêche directement d'obtenir la valeur. du dom correctement. Obtenez le chemin correct vers l’image.

Allez directement à la solution.

picUpload(e) {
   let image = new Image();
   const reader = new FileReader();
   const $img = e.target.files[0];
   const formData = new FormData();
   formData.append('pic', $img);
   reader.onload = (e) => {
    const src = e.target.result;
    image.src = src;
    if (image.width !== 750 && image.height !== 1334) {
     this.showModal('', '图片尺寸有误,请重新上传', 'warning', true, false);
    } else {
     if ($img.size > (300 * 1024)) {
      this.showModal('', '图片大小不能超过300k', 'warning', true, false);
      this.setParams('pic', '');
     } else {
      this.$set(this, 'IMGNAME', $img.name);
      this.setParams('pic', formData);
     }
    }
   }
   if (e.target.files && e.target.files[0]) {
    reader.readAsDataURL(e.target.files[0]);
   }
  },

La valeur attribuée au src de l'image ici est le chemin de l'image encodé en base64. Vous devez donc utiliser readAsDataURL pour obtenir le résultat codé en base64 du chemin. C'est une petite fosse. Prenez note ici pour une visualisation facile plus tard.

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles connexes :

Quelles sont les méthodes spécifiques d'utilisation de Compass dans Vue ?

Utilisation du composant swiper dans vue2.0 pour implémenter le carrousel (tutoriel détaillé)

JS implémente la méthode d'exploitation des données binaires

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!