Webpack에서 경로 압축 이미지의 업로드 크기를 얻는 데 문제가 있습니다(자세한 튜토리얼).

이제 Webpack 경로 압축을 사용하여 업로드된 이미지의 크기를 얻는 문제에 대해 간략하게 설명하겠습니다. 이는 좋은 참조 값을 가지며 모든 사람에게 도움이 되기를 바랍니다.

문제의 원인은 내 이미지의 크기가 url-loader의 크기 기준보다 커서 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!