xt-pic-upload

npm install xt-pic-upload --save

vue3

main.js:
import 'xt-pic-upload/dist/xt-pic-upload.css'; // 为避免冲突请在全局css之前引入

import XTPicUploadV3 from 'xt-pic-upload'

app.use(XTPicUploadV3)

示例：
<template>
  <div>
    <XTPicUploadV3
      :beforeUpload="checkFile"
      :uploadMethod="uploadImage"
      @uploadStart="handleUploadStart"
      @uploadSuccess="handleUploadSuccess"
      @uploadError="handleUploadError"
    />
  </div>
</template>

<script setup>
import { getToken } from "./auth";
// 自定义上传前的校验逻辑
function checkFile(file) {
  // 例如：只允许小于 2MB 的图片
  if (file.size > 2 * 1024 * 1024) {
    alert('文件过大')
    return false
  }
  return true
}

// 自定义上传方法，返回 Promise
function uploadImage(compressedFile) {
  // 示例：使用 fetch 上传文件到后端接口
  const formData = new FormData()
  formData.append('file', compressedFile)
  return fetch('https://mdm-admin.ejianlong.com/file/upload', {
    method: 'POST',
    headers: { Authorization: "Bearer " + getToken() },
    body: formData,
  }).then((res) => res.json())
}

// 上传事件的回调
function handleUploadStart(file) {
  console.log('开始上传:', file)
}
function handleUploadSuccess(response) {
  console.log('上传成功:', response)
}
function handleUploadError(error) {
  console.error('上传失败:', error)
}
</script>