So begrenzen Sie die Größe von Webpack-komprimierten Bildern

Dieses Mal zeige ich Ihnen, wie Sie die Größe von Webpack-komprimierten Bildern begrenzen und welche Vorsichtsmaßnahmen es gibt, um die Größe von Webpack-komprimierten Bildern zu begrenzen. Das Folgende ist eine praktische Anleitung Fall, werfen wir einen Blick darauf.

Die Ursache des Problems liegt darin, dass die Größe meines Bildes größer als der Größenstandard des URL-Loaders ist, was dazu führt, dass Webpack den Bildpfad automatisch komprimiert, was direkt dazu führt, dass ich den Wert nicht erhalten kann des Doms korrekt ermitteln.

Gehe direkt zur Lösung.

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]);
   }
  },

Der hier der Quelle des Bildes zugewiesene Wert ist der mit base64 codierte Bildpfad. Sie müssen also readAsDataURL verwenden, um das Base64-codierte Ergebnis des Pfads zu erhalten. Es ist eine kleine Grube. Machen Sie hier eine Notiz, damit Sie sie später leichter ansehen können.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website.

Empfohlene Lektüre:

Wie Webpack Dateien dynamisch importiert

So erstellen Sie einen kreisförmigen Fortschrittsbalken im WeChat-Applet

JS implementiert die Standard-Avatar-Füllung

Das obige ist der detaillierte Inhalt vonSo begrenzen Sie die Größe von Webpack-komprimierten Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!