element plus upload手动上传

Element Plus 是一套基于 Vue.js 的桌面端组件库，其中包含了丰富的组件，包括上传组件。Element Plus 的上传组件可以实现文件的手动上传。

要使用 Element Plus 的上传组件，首先需要在项目中引入 Element Plus 的库文件。然后，在需要使用上传组件的地方，可以使用 `<el-upload>` 标签来创建一个上传组件的实例。

在手动上传的情况下，可以通过设置 `action` 属性来指定上传文件的接口地址。同时，还可以通过设置 `before-upload` 属性来定义在上传之前的一些操作，比如校验文件类型、大小等。在上传成功或失败后，可以通过设置 `on-success` 和 `on-error` 属性来处理上传成功和失败的回调函数。

以下是一个示例代码，展示了如何使用 Element Plus 的上传组件进行手动上传：

<template>
  <el-upload
    action="/upload"
    :before-upload="beforeUpload"
    :on-success="handleSuccess"
    :on-error="handleError"
  >
    <el-button size="small" type="primary">点击上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    beforeUpload(file) {
      // 在这里可以进行文件校验操作
      console.log('before upload:', file);
      return true; // 返回 true 表示继续上传，返回 false 表示取消上传
    },
    handleSuccess(response, file) {
      // 上传成功的回调函数
      console.log('upload success:', response, file);
    },
    handleError(error, file) {
      // 上传失败的回调函数
      console.log('upload error:', error, file);
    }
  }
}
</script>

在上面的示例中，`action` 属性指定了上传文件的接口地址为 `/upload`，`before-upload` 方法用于文件校验，`handleSuccess` 和 `handleError` 方法分别处理上传成功和失败的情况。