Detailed explanation of how vue can achieve image compression through image-conversion

npm i image-conversion --save

import * as imageConversion from 'image-conversion'

const newFile = new Promise((resolve) => {
	// Compress to 500KB, the 500 here is the size to be compressed, which can be customized	(file, 500).then(res => {
	  resolve(res)
	}).finally(() => {
	  ('Compress the image file to 500kb')
	})
})

<!--  Upload button  -->
<el-upload
  action=""
  class="upload"
  multiple
  accept=".png, .jpg, .jpeg"
  :before-upload="beforeDocumentUpload"
  :http-request="beforeAvatarUpload"
  :on-preview="handlePictureCardPreview"
  :before-remove="handlerBeforeRemove"
  :file-list="pictureList"
  :limit="10"
  :on-exceed="handleExceed"
  list-type="picture-card"
>
  <i class="el-icon-plus" />
</el-upload>
<!--  Preview large image -->
<el-dialog :="imgVisible" :append-to-body="true">
  <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>

methods: {
	// Before uploading    beforeDocumentUpload(file) {
      const size =  / 1024 / 1024
		
	  // The uploaded image size cannot exceed 10M      if (size > 10) {
        this.$('The file size cannot exceed 10M!  ')
        return false
      }
      const extension = (file)
		
	  // Only support png, jpg, jpeg formats      if (!['png', 'jpg', 'jpeg'].includes(extension)) {
        this.$('You can only upload png, jpg, and jpeg format files!  ')
        return false
      }
      
      // Compress to 0.5M greater than 0.5M      if (size > 0.5) {
        const loading = this.$loading({
          lock: true,
          text: 'loading'
        })
        // Compression        const newFile = new Promise((resolve) => {
          // Compress to 500KB, the 500 here is the size to be compressed, which can be customized          (file, 500).then(res => {
            resolve(res)
          }).finally(() => {
            ()
          })
        })
        ('newFIle', newFile)
        return newFile
      }
      return true
    },
    // Upload    beforeAvatarUpload(file) {
      const self = this
      const reader = new FileReader()
      ()
       = function(e) {
        // const img_base64 = 
        // Custom array object, data passed to the background        self.({
          uid: ,
          base64Str: file
          // base64Str: img_base64
        })
      }
    },
    // Preview the large image	handlePictureCardPreview(file) {
	   = 
	   = true
	},
	// Delete the picture    handlerBeforeRemove(file, fileList) {
      this.imgBase64Array = this.((p) =>  !== )
    },
    handleExceed() {
      this.$('The maximum number of pictures is 10')
    },
},