在 Vue 2 中，我们通常使用 Element UI 的 el-upload 组件来实现文件上传功能。然而，在 Vue 3 中，由于 Element UI 没有官方支持 Vue 3 的版本，我们通常会使用 Element Plus（Element UI 的 Vue 3 版本）的 el-upload 组件，尽管两者的使用方式大致相同，但也有一些差异。
Vue 2 + Element UI
el-upload 组件
属性 (Attributes):
action: 必需的 URL，上传的地址headers: 设置上传的请求头部on-success: 文件上传成功时的钩子on-error: 文件上传失败时的钩子before-upload: 上传文件之前的钩子，参数为上传的文件，若返回false或者返回Promise且被 reject，则停止上传auto-upload: 是否在选取文件后立即进行上传multiple: 是否支持多文件上传limit: 允许上传文件的个数限制on-exceed: 文件超出个数限制时的钩子file-list: 已经上传的文件列表，默认根据v-model生成drag: 是否启用拖拽上传...: 其他通用属性
事件 (Events):
change: 文件状态改变时的钩子，更新文件列表success: 文件上传成功时的回调error: 文件上传失败时的回调progress: 文件上传时的进度事件remove: 文件列表移除文件时的回调...: 其他通用事件
方法 (Methods):
- Element UI 的
el-upload组件通常不提供直接调用的方法，而是通过属性和事件来控制其行为。
示例:
<template><el-uploadclass="upload-demo"action="https://example.com/upload":on-success="handleSuccess":before-upload="beforeUpload":auto-upload="false":multiple="true":limit="3":on-exceed="handleExceed":file-list="fileList":drag="true"><el-button slot="trigger" size="small" type="primary">选取文件</el-button><el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button><div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div></el-upload>
</template><script>
export default {data() {return {fileList: [],};},methods: {handleSuccess(response, file, fileList) {this.fileList = fileList;// 处理上传成功的逻辑},beforeUpload(file) {const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';const isLt2M = file.size / 1024 / 1024 < 0.5;if (!isJPG) {this.$message.error('上传头像图片只能是 JPG/PNG 格式!');return false;}if (!isLt2M) {this.$message.error('上传头像图片大小不能超过 0.5MB!');return false;}return true;},handleExceed(files, fileList) {this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);},submitUpload() {this.$refs.upload.submit(); // 使用 $refs 调用组件的 submit 方法},},
};
</script>
Vue 3 + Element Plus
在 Vue 3 中使用 Element Plus 的 el-upload 组件与 Vue 2 + Element UI 非常相似，但请注意 API 可能会有一些变化或新增功能。你应该查阅 Element Plus 的官方文档以获取最新的信息。
示例:
在 Vue 3 中使用 Element Plus 的 el-upload 组件的示例代码与 Vue 2 类似，但你需要使用 Composition API 来定义响应式的数据和方法。
<template><!-- 模板部分与 Vue 2 示例类似 -->
</template><
—— 24节气立夏介绍网页(1个页面))
