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

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

亚连

풀어 주다： 2018-06-05 16:10:34

원래의

1478명이 탐색했습니다.

이제 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(&#39;pic&#39;, $img);
   reader.onload = (e) => {
    const src = e.target.result;
    image.src = src;
    if (image.width !== 750 && image.height !== 1334) {
     this.showModal(&#39;&#39;, &#39;图片尺寸有误,请重新上传&#39;, &#39;warning&#39;, true, false);
    } else {
     if ($img.size > (300 * 1024)) {
      this.showModal(&#39;&#39;, &#39;图片大小不能超过300k&#39;, &#39;warning&#39;, true, false);
      this.setParams(&#39;pic&#39;, &#39;&#39;);
     } else {
      this.$set(this, &#39;IMGNAME&#39;, $img.name);
      this.setParams(&#39;pic&#39;, formData);
     }
    }
   }
   if (e.target.files && e.target.files[0]) {
    reader.readAsDataURL(e.target.files[0]);
   }
  },

로그인 후 복사

여기서 이미지의 src에 할당된 값은 base64로 인코딩된 이미지 경로입니다. 따라서 경로를 base64로 인코딩한 후 결과를 얻으려면 readAsDataURL을 사용해야 합니다. 작은 구덩이입니다. 나중에 쉽게 볼 수 있도록 여기에 메모해 두세요.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.