Element plus默认上传指定文件到指定接口

Element Plus 是 Vue 3 时代的 UI 组件库 Element UI 的升级版本，它提供了一个强大的 Admin 开发框架。关于上传文件的功能，默认情况下，Element Plus 中的 `el-upload` 组件可以用来处理文件上传操作。当你需要将指定文件上传到特定接口时，可以按照以下步骤配置：

1. 首先，在模板中使用 `<el-upload>` 元素：

<template>
  <el-upload
    action="your-api-url" {/* 这里填写你要发送请求的服务器接口 */}
    :on-success="handleSuccess"
    :before-upload="beforeUpload"
  >
    <el-button>点击上传</el-button>
    <div slot="tip">只能上传jpg/png文件</div>
  </el-upload>
</template>

2. 定义一些方法来处理上传过程：

<script>
export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    handleSuccess(response) {
      console.log('文件上传成功', response);
      // 在这里处理返回的响应数据
    },
    beforeUpload(file) {
      const isImage = /\.(jpe?g|png)$/i.test(file.type); // 检查是否是图片
      if (!isImage) {
        this.$message.error('只能上传 jpg 或 png 格式的文件');
        return false;
      }
      // 还可以根据需要检查文件大小等其他条件
      return true;
    },
  },
};
</script>

在这个例子中，`action` 属性指定了文件上传的URL，`beforeUpload` 用于验证上传前的条件，`handleSuccess` 是处理上传成功的回调。