文件上传vue3和element-plus

首先，你需要在Vue3项目中安装Element Plus依赖：

npm install element-plus

接着，在Vue3项目中创建一个组件来上传文件。在该组件中，需要使用Element Plus提供的上传组件。

以下是一个示例组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      :action="uploadUrl"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :on-error="handleError"
      :limit="limit"
      :file-list="fileList"
      :show-file-list="showFileList"
      :disabled="disabled"
      :on-remove="handleRemove"
      :on-exceed="handleExceed"
    >
      <el-button :disabled="disabled" size="small" type="primary">{{ buttonText }}</el-button>
      <div slot="tip" class="el-upload__tip">{{ tip }}</div>
    </el-upload>
  </div>
</template>

<script>
import { ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';

export default {
  name: 'FileUpload',
  components: { ElUpload, ElButton },
  props: {
    uploadUrl: { type: String, default: '/api/upload' },
    buttonText: { type: String, default: '上传文件' },
    tip: { type: String, default: '只能上传jpg/png文件，且不超过500kb' },
    limit: { type: Number, default: 3 },
    showFileList: { type: Boolean, default: true },
    disabled: { type: Boolean, default: false }
  },
  setup(props) {
    const fileList = ref([]);

    const 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 格式!');
        return false;
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
        return false;
      }

      fileList.value.push(file);
      return true;
    };

    const handleSuccess = (response, file, fileList) => {
      this.$message.success('上传成功!');
      console.log(response, file, fileList);
    };

    const handleError = (err, file, fileList) => {
      this.$message.error('上传失败!');
      console.log(err, file, fileList);
    };

    const handleRemove = (file, fileList) => {
      console.log(file, fileList);
    };

    const handleExceed = (files, fileList) => {
      this.$message.warning(`当前限制选择 ${props.limit} 个文件，本次选择了 ${files.length} 个文件，已选择 ${fileList.length} 个文件`);
    };

    return {
      fileList,
      beforeUpload,
      handleSuccess,
      handleError,
      handleRemove,
      handleExceed
    };
  }
};
</script>

<style>
.el-upload__tip {
  margin-top: 10px;
  color: #606266;
}
</style>

在以上示例中，我们使用了Element Plus提供的上传组件ElUpload，并且定义了一些组件属性和事件处理函数。具体的说明如下：

- `uploadUrl`：上传文件的地址，默认为`/api/upload`。
- `buttonText`：上传按钮的文本，默认为`上传文件`。
- `tip`：提示信息，默认为`只能上传jpg/png文件，且不超过500kb`。
- `limit`：最多上传的文件数量，默认为3。
- `showFileList`：是否显示文件列表，默认为true。
- `disabled`：是否禁用上传功能，默认为false。
- `fileList`：上传的文件列表，使用Vue3中的`ref`进行声明。
- `beforeUpload`：上传前的校验函数，判断上传的文件是否符合要求。
- `handleSuccess`：上传成功时的回调函数。
- `handleError`：上传失败时的回调函数。
- `handleRemove`：删除文件时的回调函数。
- `handleExceed`：超过上传文件数量限制时的回调函数。

在以上组件中，我们使用了Element Plus提供的`ElButton`和`ElUpload`组件，并且在`setup()`函数中对组件的属性和事件进行了处理。

最后，在需要使用上传文件功能的页面中，引入该组件即可：

<template>
  <div>
    <file-upload />
  </div>
</template>

<script>
import FileUpload from '@/components/FileUpload';

export default {
  components: { FileUpload }
};
</script>

这样，就完成了在Vue3中使用Element Plus上传文件的操作。