Problems with obtaining upload size of path compressed images in Webpack (detailed tutorial)

Below I will share with you a brief discussion on the issue of obtaining the upload size of compressed images using Webpack paths. It has a good reference value and I hope it will be helpful to everyone.

The cause of the problem is that the size of my image is larger than the size standard of url-loader, which causes webpack to automatically compress the path of the image, which directly causes me to be unable to obtain the value of the dom correctly. Get the correct path to the image.

Direct solution.

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

The value assigned to the src of the image here is the image path encoded with base64. So you need to use readAsDataURL to get the result after base64 encoding of the path. It's a small pit. Make a note here for easy viewing later.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

What are the specific methods of using Compass in Vue?

Use the swiper component in vue2.0 to implement carousel (detailed tutorial)

js implementation of binary data operation method

The above is the detailed content of Problems with obtaining upload size of path compressed images in Webpack (detailed tutorial). For more information, please follow other related articles on the PHP Chinese website!