vue3使用element-plus里的拖拽上传

要在 Vue3 中使用 Element Plus 的拖拽上传，需要进行以下步骤：

1. 安装 Element Plus

npm install element-plus --save

2. 在 Vue 3 项目中引入 Element Plus

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';

const app = createApp(App);
app.use(ElementPlus);
app.mount('#app');

3. 使用 Element Plus 的上传组件

<el-upload
  class="upload-demo"
  action="https://jsonplaceholder.typicode.com/posts/"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-upload="beforeUpload"
  :on-success="handleSuccess"
  :on-error="handleError"
  :limit="3"
  :on-exceed="handleExceed"
  :headers="{'Authorization': 'Bearer ' + token}">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

其中，`:before-upload` 属性可以设置一个函数，在上传文件之前进行一些操作，如验证文件类型和大小等。

beforeUpload(file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isJPG) {
    this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
  }
  if (!isLt2M) {
    this.$message.error('上传头像图片大小不能超过 2MB!');
  }
  return isJPG && isLt2M;
}

更多关于 Element Plus 的上传组件的使用，可以参考官方文档：https://element-plus.gitee.io/#/zh-CN/component/upload