Probleme beim Ermitteln der Upload-Größe von pfadkomprimierten Bildern in Webpack (ausführliches Tutorial)

Im Folgenden werde ich eine kurze Diskussion über die Frage der Ermittlung der Upload-Größe komprimierter Bilder mithilfe von Webpack-Pfaden führen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich sein wird.

Die Ursache des Problems liegt darin, dass die Größe meines Bildes größer ist als der Größenstandard des URL-Loaders, 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 Ergebnis nach der Base64-Codierung des Pfads zu erhalten. Es ist eine kleine Grube. Machen Sie hier eine Notiz, damit Sie sie später leichter ansehen können.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Welche spezifischen Methoden gibt es für die Verwendung von Compass in Vue?

Verwenden der Swiper-Komponente in vue2.0 zum Implementieren eines Karussells (ausführliches Tutorial)

JS implementiert die Methode zum Betreiben von Binärdaten

Das obige ist der detaillierte Inhalt vonProbleme beim Ermitteln der Upload-Größe von pfadkomprimierten Bildern in Webpack (ausführliches Tutorial). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!