在Vue3中使用ElementPlus进行文件上传的步骤如下：
1. 安装ElementPlus库
在终端中使用npm或yarn命令安装ElementPlus库：
“`
npm install element-plus –save
“`
或
“`
yarn add element-plus
“`
2. 引入ElementPlus库
在Vue组件中引入ElementPlus库：
“`javascript
import { ElUpload } from ‘element-plus’;
“`
3. 在模板中使用ElUpload组件
在Vue组件的模板中使用ElUpload组件，设置上传的文件类型、上传的地址、上传的方式等属性：
“`html
<template>
<el-upload
class="upload-demo"
action="/upload"
:headers="{‘Authorization’: ‘Bearer ‘ + token}"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:file-list="fileList"
:auto-upload="false"
:accept="accept"
:limit="limit"
:multiple="multiple"
:show-file-list="showFileList"
:on-exceed="handleExceed"
:on-remove="handleRemove"
:on-progress="handleProgress">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">只能上传{{accept}}格式的文件，且不超过{{limit}}个文件</div>
</el-upload>
</template>
“`
其中，各个属性的含义如下：
– action：上传文件的地址
– headers：上传文件时需要携带的请求头
– on-success：上传成功后的回调函数
– on-error：上传失败后的回调函数
– before-upload：上传前的回调函数
– file-list：已上传的文件列表
– auto-upload：是否自动上传
– accept：允许上传的文件类型
– limit：允许上传的文件数量
– multiple：是否允许上传多个文件
– show-file-list：是否显示已上传的文件列表
– on-exceed：超出文件数量限制时的回调函数
– on-remove：删除已上传的文件时的回调函数
– on-progress：上传进度的回调函数
4. 在Vue组件中定义回调函数
在Vue组件中定义上传成功、上传失败、上传前、上传进度等回调函数：
“`javascript
export default {
data() {
return {
fileList: [],
token: ‘your_token’,
accept: ‘.jpg,.jpeg,.png’,
limit: 3,
multiple: true,
showFileList: true
};
},
methods: {
handleSuccess(response, file, fileList) {
console.log(response, file, fileList);
},
handleError(err, file, fileList) {
console.log(err, file, fileList);
},
beforeUpload(file) {
console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(`当前限制选择 ${this.limit} 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
},
handleRemove(file, fileList) {
console.log(file, fileList);
},
handleProgress(event, file, fileList) {
console.log(event, file, fileList);
}
}
}
“`
其中，各个回调函数的含义如下：
– handleSuccess：上传成功后的回调函数，参数为服务器返回的响应、上传的文件对象和已上传的文件列表
– handleError：上传失败后的回调函数，参数为错误对象、上传的文件对象和已上传的文件列表
– beforeUpload：上传前的回调函数，参数为上传的文件对象
– handleExceed：超出文件数量限制时的回调函数，参数为本次选择的文件列表和已上传的文件列表
– handleRemove：删除已上传的文件时的回调函数，参数为删除的文件对象和已上传的文件列表
– handleProgress：上传进度的回调函数，参数为上传进度事件、上传的文件对象和已上传的文件列表
5. 完成文件上传功能
通过以上步骤，即可在Vue3中使用ElementPlus进行文件上传。在上传文件时，可以根据需要设置上传的文件类型、上传的地址、上传的方式等属性，并在Vue组件中定义上传成功、上传失败、上传前、上传进度等回调函数，以实现完整的文件上传功能。