【使用 Element UI 实现手动上传文件：FormData 追加文件和其他参数，支持单文件覆盖上传】

在开发 Web 应用时，文件上传是一个常见的需求。Element UI 提供了强大的 el-upload 组件，可以轻松实现文件上传功能。本文将详细介绍如何使用 Element UI 实现以下功能：

1. 手动触发文件上传：用户选择文件后，点击按钮手动上传。

2. 使用 FormData 追加文件和其他参数：将文件和其他表单数据一起提交。

3. 单文件覆盖上传：只允许上传一个文件，新文件会覆盖旧文件。

---

1. 实现思路

为了实现上述功能，我们需要以下几个步骤：

1. 禁用自动上传：通过 auto-upload="false" 关闭自动上传。

2. 手动触发上传：通过 ref 获取 el-upload 实例，调用 submit 方法手动上传。

3. 使用 FormData 追加文件和其他参数：在自定义上传逻辑中，将文件和其他参数添加到 FormData 中。

4. 单文件覆盖上传：通过 limit="1" 限制文件数量，并在 on-change 事件中处理文件覆盖逻辑。

---

2. 完整代码实现

以下是完整的代码实现：

运行 HTML

---

3. 关键点解析

3.1 手动上传

通过 auto-upload="false" 关闭自动上传，并使用 this.$refs.upload.submit() 手动触发上传。

3.2 使用 FormData 追加文件和其他参数

在 customUpload 方法中，创建 FormData 对象，将文件和其他参数追加到其中，然后通过 axios 发送请求。

3.3 单文件覆盖上传

• 通过 limit="1" 限制只能上传一个文件。

• 在 handleFileChange 中，如果文件列表长度超过 1，则只保留最新文件。

• 在 handleFileExceed 中，提示用户新文件将覆盖旧文件。

---

4. 效果演示

1. 选择文件

   • 用户点击“选择文件”按钮，选择文件后，文件列表中只显示最新文件。

   • 如果用户再次选择文件，旧文件会被新文件覆盖。

2. 输入其他参数

   • 用户可以输入 userId 和 desc 等参数。

3. 手动上传

   • 点击“上传文件”按钮，文件和其他参数通过 FormData 提交到服务器。

---

5. 常见问题

5.1 文件上传失败

• 检查服务器接口是否正确。

• 确保 FormData 的字段名与服务器要求的字段名一致。

5.2 文件覆盖逻辑失效

• 确保 handleFileChange 方法中正确处理文件列表。

5.3 样式问题

• 如果样式不符合需求，可以通过 CSS 调整。

---

6. 总结

通过 Element UI 的 el-upload 组件，我们可以轻松实现手动上传文件、使用 FormData 追加文件和其他参数、以及单文件覆盖上传的功能。本文提供的代码可以直接用于实际项目中，希望对大家有所帮助！

如果你有其他问题或建议，欢迎在评论区留言讨论~