Vue3的
Element-UI已经更新了，不再需要使用自
定义file插槽。在Vue3
中，可以使用v-model来绑定上传文件的值，使用el-upload组件来实现文件上传功能。具体步骤如下：
1. 在组件
中引入el-upload组件和el-button组件。
```
<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"
:auto-upload="false"
list-type="picture-card"
:on-success="handleSuccess"
:on-error="handleError"
:limit="3"
:on-change="handleChange"
:disabled="disabled"
:show-file-list="showFileList"
:on-progress="handleProgress"
:http-request="httpRequest"
:with-credentials="withCredentials"
:headers="headers"
:data="data"
:multiple="multiple"
:accept="accept"
:drag="drag"
:on-dragover="handleDragover"
:on-dragenter="handleDragenter"
:on-dragleave="handleDragleave"
>
<i class="el-icon-plus"></i>
<div class="el-upload__text">将文件拖到此处，或
点击上传</div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
</template>
<script>
import { ref } from 'vue';
import { ElUpload, ElButton } from 'element-plus';
export default {
components: {
ElUpload,
ElButton,
},
setup() {
const fileList = ref([]);
const handleSuccess = (response, file, fileList) => {
console.log('handleSuccess', response, file, fileList);
};
const handleError = (err, file, fileList) => {
console.log('handleError', err, file, fileList);
};
const handlePreview = (file) => {
console.log('handlePreview', file);
};
const handleRemove = (file, fileList) => {
console.log('handleRemove', file, fileList);
};
const beforeUpload = (file) => {
console.log('beforeUpload', file);
};
const handleExceed = (files, fileList) => {
console.log('handleExceed', files, fileList);
};
const handleChange = (file, fileList) => {
console.log('handleChange', file, fileList);
};
const handleProgress = (event, file, fileList) => {
console.log('handleProgress', event, file, fileList);
};
const httpRequest = (option) => {
console.log('httpRequest', option);
option.onSuccess();
};
const handleDragover = (event) => {
console.log('handleDragover', event);
};
const handleDragenter = (event) => {
console.log('handleDragenter', event);
};
const handleDragleave = (event) => {
console.log('handleDragleave', event);
};
const headers = {
Authorization: 'Bearer ' + localStorage.getItem('token'),
};
const data = {
name: 'my-upload',
};
const withCredentials = true;
const multiple = true;
const accept = 'image/png,image/jpg';
const drag = true;
const disabled = false;
const showFileList = true;
return {
fileList,
handleSuccess,
handleError,
handlePreview,
handleRemove,
beforeUpload,
handleExceed,
handleChange,
handleProgress,
httpRequest,
handleDragover,
handleDragenter,
handleDragleave,
headers,
data,
withCredentials,
multiple,
accept,
drag,
disabled,
showFileList,
};
},
};
</script>
```
2. 在el-upload组件
中添加slot="tip"的div，用于显示上传文件的提示信息。
```
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
```
3. 在setup
函数中定义相关的回
调函数，如handleSuccess、handleError等，用于处理上传文件的结果。
4. 在template
中使用el-upload组件，并将回
调函数和文件列表绑定到组件上。
```
<el-upload
...
:file-list="fileList"
:on-success="handleSuccess"
:on-error="handleError"
:before-upload="beforeUpload"
:on-exceed="handleExceed"
:on-change="handleChange"
:disabled="disabled"
:show-file-list="showFileList"
:on-progress="handleProgress"
:http-request="httpRequest"
:with-credentials="withCredentials"
:headers="headers"
:data="data"
:multiple="multiple"
:accept="accept"
:drag="drag"
>
<i class="el-icon-plus"></i>
<div class="el-upload__text">将文件拖到此处，或
点击上传</div>
<div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>
```
以上就是使用el-upload组件实现文件上传的步骤，无需使用自
定义的file插槽。
3100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
