el-upload 上传文件 入参格式为form-data格式，入参字段为code、name、type、file(文件)的形式，如何实现？

el-upload 是 Element UI 中用于文件上传的组件。如果你需要上传文件并将其封装为 form-data 格式，并且包含字段如 code、name、type 和 file，你可以通过自定义 before-upload 或 action 进行处理。

1. el-upload 的基本用法

Element UI 的 el-upload 默认会将文件直接通过 multipart/form-data 的形式上传，你只需要设置 action 指定上传的 URL，并且在上传时通过 before-upload 或 custom-request 来附加其他字段（code、name、type）。

2. 上传文件并添加额外字段

你可以通过 custom-request 来完全控制上传逻辑，手动使用 FormData 来传递文件和额外的字段。

示例代码

<template>
  <el-upload
    action="/upload"         <!-- 上传的接口 -->
    :show-file-list="false"   <!-- 是否显示文件列表 -->
    :auto-upload="false"     <!-- 是否自动上传 -->
    :on-remove="handleRemove" <!-- 文件移除时的回调 -->
    :custom-request="customRequest" <!-- 使用自定义请求 -->
  >
    <el-button slot="trigger" type="primary">选择文件</el-button>
    <el-button slot="upload" type="success" @click="handleUpload">上传</el-button>
  </el-upload>
</template>

<script>
export default {
  methods: {
    // 自定义上传请求
    customRequest({ file, onSuccess, onError }) {
      const formData = new FormData();
      // 添加额外的字段
      formData.append('code', 'your_code');  // 添加 code 字段
      formData.append('name', 'your_name');  // 添加 name 字段
      formData.append('type', 'your_type');  // 添加 type 字段
      formData.append('file', file);         // 添加文件字段

      // 使用 fetch 或 axios 发送请求
      fetch('/upload', {
        method: 'POST',
        body: formData,
      })
        .then(response => {
          if (response.ok) {
            onSuccess();  // 上传成功回调
          } else {
            throw new Error('上传失败');
          }
        })
        .catch(error => {
          onError(error);  // 上传失败回调
        });
    },
    // 触发上传
    handleUpload() {
      this.$refs.upload.submit();
    },
    // 文件移除时的回调
    handleRemove(file) {
      console.log('Removed file:', file);
    }
  }
};
</script>

3. 关键点解析

• action：上传文件的 API 接口（这里是 /upload）。实际使用中，可能需要后端接口来处理文件上传。

• show-file-list：设置为 false 是为了隐藏文件列表。如果需要显示文件列表，可以设为 true，或者根据需求自定义展示。

• auto-upload：设置为 false，表示文件选择后不自动上传，点击上传按钮时手动触发上传。

• custom-request：通过 custom-request 来定制文件上传的逻辑。这里我们手动构造 FormData 对象并通过 fetch 或 axios 发起上传请求。可以在 FormData 中添加额外字段（如 code、name、type）。

• handleUpload：点击上传按钮时手动触发上传操作。

• file：上传的文件会通过 file 字段传递，你可以在 FormData 中添加 file 和其他额外字段。

4. 上传过程中需要注意的几点

1. 确保后端支持 form-data 格式：确保后端能够正确解析传递的 form-data 格式，尤其是多个字段（code、name、type）和文件（file）字段。

2. 错误处理：在 customRequest 中需要做错误处理，确保上传失败时能够反馈给用户。

3. 文件验证：可以在 before-upload 中进行文件类型或大小的验证，确保上传的文件符合要求。

例如：文件类型和大小验证

beforeUpload(file) {
  const isPDF = file.type === 'application/pdf';
  const isLt2M = file.size / 1024 / 1024 < 2;

  if (!isPDF) {
    this.$message.error('只能上传 PDF 文件!');
  }
  if (!isLt2M) {
    this.$message.error('文件大小不能超过 2MB!');
  }
  return isPDF && isLt2M;
}

5. 总结

• 使用 el-upload 的 custom-request 方法可以自定义上传请求，通过 FormData 附加额外的字段（如 code、name、type）以及文件字段（file）。
• 可以控制上传的时机、展示文件列表、以及在上传过程中进行额外的验证和错误处理。
• 需要确保前后端对 form-data 格式的处理一致。

这样，你就可以通过 el-upload 实现文件上传，并将额外的字段和文件一起提交。