Method 1
Do not use hooks inside components

<el-upload
  class="upload-image"
  ref="upload"
  multiple
  :action="baseUrl"
  list-type="picture"
  :auto-upload="false"
  accept="image/*">
  <el-button slot="trigger" size="small" type="primary">Select file</el-button>
  <el-button size="small" type="success" @click="submitUpload">Upload to server</el-button>
  <div slot="tip">Upload only jpg,png,gif Format, size up to 500 KB Pictures</div>
</el-upload>

js

Call this function when clicking the upload server button, that is, do not leave upload We don't need to call his methods to make our own hook.
    submitUpload () {
      let { uploadFiles } = this.$refs.upload
      let form = new FormData()
      let status = true
      // Check the size of each picture here. If it doesn't meet the requirements, you will be prompted. If it doesn't meet the requirements, you will not perform the following operations.
      uploadFiles.forEach(item => {
        const size = item.raw.size / 1024 <= 500
        if (!size) {
          this.$message.error(`${item.raw.name}Size over 500 KB`)
          status = false
          return
        }
        form.append('image[]', item.raw)
      })
      if (!status) {
        return
      }
      // Pass the FormData object to the backend after it meets the conditions
      //Call interface upload form parameter
     
  }

Method two
Use the internal callback to get the corresponding

<el-upload
  class="upload-image"
  ref="upload"
  multiple
  :action="baseUrl"
  list-type="picture"
  :auto-upload="false"
  :before-upload="beforeImageUpload"
  :http-request="ImageRequest"
  accept="image/*">
  <el-button slot="trigger" size="small" type="primary">Select file</el-button>
  <el-button size="small" type="success" @click="submitUpload">Upload to server</el-button>
  <div slot="tip">Upload only jpg,png,gif Format, size up to 500 KB Pictures</div>
</el-upload>

js

beforeImageUpload (file) { // Check the file with the hook before uploading it
    const size = file.size / 1024 < 500
    if (!size) {
      this.$message.error('Upload image size cannot exceed 500 KB!')
    }
    return size
}

After the hook returns false before uploading, the following hook will not be executed for the file.
Therefore, the hook in HTTP request will not be executed. All the information obtained in the hook is the file file information that has passed the verification.

ImageRequest (file) {
    this.formData.append('image[]', file.file)
}

At this time, the data in the formData is the data passing the verification.

submitUpload () {
    this.formData = new FormData()
    // Manual trigger upload
    this.$refs.upload.submit()
    // At this point, all hooks have been executed. The data stored in formData is verified.
    // At this time, upload the data in the calling interface.
}

When this method is used, the unqualified files will be automatically deleted, leaving only the qualified ones
Maybe it's the cause of the before upload hook that doesn't match. Then he will call the deleted hook.
So using method one is much better than this.
This method saves us from writing styles and previews. Components help you. You just need to write logic.