vue3的element-ui自定义file插槽

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">将文件拖到此处，或<em>点击上传</em></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">将文件拖到此处，或<em>点击上传</em></div>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
</el-upload>

以上就是使用el-upload组件实现文件上传的步骤，无需使用自定义的file插槽。