Webpack でパス圧縮された画像のアップロード サイズを取得する際の問題 (詳細なチュートリアル)

ここで、Webpack パス圧縮を使用してアップロードされた画像のサイズを取得する問題についての簡単な説明を共有します。これは優れた参考値であり、皆さんの役に立つことを願っています。

画像のサイズが URL ローダーのサイズ標準よりも大きいため、Webpack が画像パスを自動的に圧縮し、それが直接の原因となり、画像を取得するときに画像を正しく取得できなくなります。正しいパスの値。

解決策に直接進みます。

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

ここで画像の src に割り当てられる値は、base64 でエンコードされた画像のパスです。 したがって、パスの Base64 エンコード結果を取得するには、readAsDataURL を使用する必要があります。小さな穴です。後で簡単に見られるように、ここにメモを付けます。

上記は私があなたのためにまとめたものです。

関連記事:

VueでCompassを使う具体的な方法とは？

vue2.0のswiperコンポーネントを使用してカルーセルを実装します（詳細なチュートリアル）

jsを使用してバイナリデータ操作メソッドを実装します

以上がWebpack でパス圧縮された画像のアップロード サイズを取得する際の問題 (詳細なチュートリアル)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。