当前位置：首页 > news >正文

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

news 来源：原创 2025/6/16 2:10:38

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-uploadaction="/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. 上传过程中需要注意的几点

确保后端支持 form-data 格式：确保后端能够正确解析传递的 form-data 格式，尤其是多个字段（code、name、type）和文件（file）字段。
错误处理：在 customRequest 中需要做错误处理，确保上传失败时能够反馈给用户。
文件验证：可以在 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 实现文件上传，并将额外的字段和文件一起提交。

1. el-upload 的基本用法