Vue3 中使用 el-upload 实现文件上传的方法

在 Vue3 的项目开发中，文件上传是一个常见的功能需求。Element Plus 中的 el-upload 组件为我们提供了便捷的文件上传解决方案。下面就详细介绍一下在 Vue3 中如何使用 el-upload 实现文件上传。

确保项目中已经安装了 Element Plus。如果没有安装，可以通过 npm 或 yarn 进行安装。安装完成后，在需要使用 el-upload 的组件中引入并注册它。

在模板中使用 el-upload 组件非常简单。例如：

<template>
  <el-upload
    class="upload-demo"
    action="https://jsonplaceholder.typicode.com/posts/"
    :on-change="handleChange"
    :before-upload="beforeUpload"
  >
    <el-button size="small" type="primary">点击上传</el-button>
    <template #tip>
      <div class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
    </template>
  </el-upload>
</template>

在上述代码中，action 属性指定了文件上传的后端接口地址。on-change 方法会在文件状态发生改变时触发，before-upload 方法则在文件上传前触发，可以在这个方法中进行文件格式、大小等方面的校验。

接下来是在 script 部分定义相关的方法：

import { ref } from 'vue';

export default {
  setup() {
    const handleChange = (file, fileList) => {
      console.log(file, fileList);
    };

    const beforeUpload = (file) => {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt500K = file.size / 1024 / 1024 < 0.5;

      if (!isJPG) {
        console.log('上传图片只能是 JPG 或 PNG 格式!');
      }
      if (!isLt500K) {
        console.log('上传图片大小不能超过 500KB!');
      }
      return isJPG && isLt500K;
    };

    return {
      handleChange,
      beforeUpload
    };
  }
};

在 handleChange 方法中，我们可以获取到上传的文件以及文件列表，方便进行后续处理。beforeUpload 方法通过校验文件类型和大小，返回一个布尔值来决定是否允许上传。

通过以上步骤，我们就实现了在 Vue3 中使用 el-upload 进行文件上传的基本功能。当然，实际项目中还需要根据具体需求，进一步完善与后端的交互逻辑、错误处理等功能。掌握这些方法，能有效提高开发效率，为用户提供良好的文件上传体验。