elementui 文件上传传参

### 使用 ElementUI 实现文件上传并传递参数 在使用 ElementUI 的 `el-upload` 组件时，可以通过配置项 `data` 来向服务端发送额外的参数。以下是详细的实现方法以及代码示例。 #### 配置项说明 - **action**: 设置上传接口的 URL 地址。 - **headers**: 如果需要携带自定义头部信息（如 token），可以在该属性中设置。 - **data**: 这是一个对象，用于附加额外的键值对参数[^1]。 - **beforeUpload**: 可选钩子函数，在文件上传之前执行逻辑验证或其他操作。 - **onChange**: 当文件状态改变时触发回调函数，可用于处理文件列表更新等场景。 下面提供了一个完整的 Vue 单文件上传案例： ```vue <template> <el-form :model="form"> <!-- 表单项 --> <el-form-item label="附件名称：" prop="fileName"> <el-input v-model="form.fileName" placeholder="请输入附件名称"></el-input> </el-form-item> <!-- 文件上传控件 --> <el-form-item label="上传文件：" prop="file"> <el-upload class="upload-demo" action="/api/uploadFile" /* 替换为实际的服务端地址 */ :headers="{'Authorization': 'Bearer ' + token}" /* 添加认证token (可选)*/ :data="extraParams" /* 发送额外参数 */ :before-upload="beforeUploadHandler" :on-success="handleSuccess" :on-error="handleError" :limit="1"> /* 最大允许上传数量 */ <el-button size="small" type="primary">点击上传</el-button> </el-upload> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { fileName: '' }, // 表单数据模型 extraParams: {}, // 自定义参数容器 token: 'your-auth-token' // 假设已获取到用户的授权令牌 }; }, methods: { beforeUploadHandler(file) { const isJPGorPNG = file.type === 'image/jpeg' || file.type === 'image/png'; if (!isJPGorPNG) { this.$message.error('只支持 JPG 或 PNG 格式的图片!'); } const isValidSize = file.size / 1024 / 1024 < 2; if (!isValidSize) { this.$message.error('文件大小不得超过 2MB'); } this.extraParams = { fileName: this.form.fileName, fileType: file.name.split('.').pop(), userId: localStorage.getItem('userId') }; /* 动态填充参数 */ return isJPGorPNG && isValidSize; /* 返回布尔值控制是否继续上传流程 */ }, handleSuccess(response, file, fileList){ console.log("成功响应:", response); this.$message.success(`文件 ${response.data} 已经上传完成`); }, handleError(err, file, fileList){ console.error("错误详情:", err); this.$message.error("文件上传失败，请稍后再试"); } } }; </script> ``` 以上代码展示了如何通过 `el-upload` 的 `data` 属性来动态绑定额外参数，并且利用 `beforeUpload` 方法校验文件合法性的同时构建这些参数[^2]。 对于多文件上传的情况，则需注意调整前端表单结构以便适应批量提交的需求；而后端则应设计相应的 API 接口接收数组形式的数据包[^3]。