Comment limiter la taille des images compressées Webpack

Cette fois, je vais vous montrer comment limiter la taille des images compressées par Webpack, et quelles sont les précautions pour limiter la taille des images compressées Webpack. cas, jetons un coup d'oeil.

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.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment Webpack importe dynamiquement des fichiers

Comment créer une barre de progression circulaire dans l'applet WeChat

JS implémente le remplissage d'avatar par défaut

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!