vue3中使用el-upload

在 Vue 3 中使用 Element UI 的 Upload 组件，你可以按照以下步骤进行配置：

1. 安装 Element UI 组件库

npm install element-plus --save

2. 在 main.js 中引入 Element UI

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

createApp(App)
  .use(ElementPlus)
  .mount('#app')

3. 在组件中使用 Upload 组件

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

<script>
export default {
  data() {
    return {
      fileList: [],
      disabled: false,
    };
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 < 500;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
      }
      if (!isLt500K) {
        this.$message.error('上传头像图片大小不能超过 500KB!');
      }
      return isJPG && isLt500K;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
    },
    handleError(err, file, fileList) {
      console.log(err, file, fileList);
    },
  },
};
</script>

以上是一个简单的示例，你可以根据自己的需求进行修改。同时，你需要注意以下几点：

- `action` 属性指定上传的接口地址；
- `before-upload` 属性可以对上传文件的类型和大小进行限制；
- `on-success` 和 `on-error` 属性分别指定上传成功和上传失败的回调函数；
- `file-list` 属性可以设置已上传的文件列表；
- `disabled` 属性可以控制上传组件是否可用；
- `limit` 属性可以限制上传文件的数量。