element-plus文件上传后提交表单

Element Plus 是一个基于 Vue 3 的组件库，其中包含了丰富的 UI 组件，包括文件上传组件 `ElUpload`。通过使用 `ElUpload` 组件，用户可以方便地上传文件，并且还可以与表单一起提交文件数据。

在 Element Plus 中，`ElUpload` 组件提供了两种文件上传模式：`button` 和 `drag`。你可以通过设置 `action` 属性来指定上传的服务器地址。当用户选择文件后，可以通过事件来获取这些文件，并将它们添加到表单数据中进行提交。

以下是使用 Element Plus 的 `ElUpload` 组件进行文件上传后提交表单的基本步骤：

1. 在 Vue 组件中引入 `ElUpload` 组件。
2. 设置 `ElUpload` 的 `action` 属性为你的上传接口地址。
3. 使用 `before-upload` 钩子函数来处理文件上传前的逻辑，比如校验文件类型和大小。
4. 使用 `on-success` 或 `on-error` 钩子函数来处理文件上传成功或失败后的逻辑。
5. 在 `ElForm` 表单中添加 `ElUpload` 组件，并确保表单有正确的提交机制，比如监听表单的提交事件，并在事件处理函数中处理上传后的逻辑。
6. 在表单提交时，`ElUpload` 会自动将已上传的文件列表作为表单数据的一部分一起发送到服务器。

示例代码如下：

<template>
  <el-form ref="form" @submit.native.prevent="handleSubmit">
    <el-upload
      action="你的上传接口地址"
      :before-upload="beforeUpload"
      :on-success="handleSuccess"
      :on-error="handleError"
      list-type="picture">
      <el-button size="small" type="primary">选取文件</el-button>
    </el-upload>
    <el-form-item>
      <el-button type="primary" native-type="submit">提交</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  methods: {
    handleSubmit() {
      // 获取表单引用并调用提交方法
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过后，可以在这里发送请求将数据提交到服务器
          // 由于 Element Plus 会自动处理文件上传，所以这里的 data 应该是表单中剩余的数据
          const formData = new FormData();
          // 添加其他表单数据到 formData 中...
          // 最后，使用 axios 或者原生 fetch 发送请求
        }
      });
    },
    beforeUpload(file) {
      // 文件上传前的逻辑
      // 返回 false 可以阻止上传
      return true;
    },
    handleSuccess(response, file, fileList) {
      // 文件上传成功的处理逻辑
      console.log('上传成功', response, file, fileList);
    },
    handleError(err, file, fileList) {
      // 文件上传失败的处理逻辑
      console.error('上传失败', err, file, fileList);
    }
  }
};
</script>