### 在 el-upload 中上传图片并添加自定义参数 relatedId 和 scope 在使用 `el-upload` 上传图片时，可以通过自定义 `http-request` 方法将文件主体与附加参数（如 `relatedId` 和 `scope`）一并提交至接口。以下是具体实现方法： #### 自定义上传逻辑 通过设置 `:auto-upload="false"` 禁用自动上传功能，并使用 `http-request` 方法手动处理文件上传过程。在此过程中，可以创建一个 `FormData` 对象，将文件和附加参数一同添加到该对象中[^1]。 ```vue <template> <el-upload ref="upload" action="#" :auto-upload="false" :on-change="handleChange" :file-list="imgfileList" :http-request="customUpload"> </el-upload> </template> <script> import axios from 'axios'; export default { data() { return { imgfileList: [], // 文件列表 relatedId: '12345', // 示例：相关ID scope: 'public' // 示例：作用域 }; }, methods: { handleChange(file, fileList) { console.log('当前文件:', file); // 输出当前文件对象 console.log('文件列表:', fileList); // 输出所有已选择的文件列表 this.imgfileList = fileList; }, customUpload(param) { const formData = new FormData(); // 创建 FormData 实例 this.imgfileList.forEach((file, index) => { formData.append('files', file.raw, file.name); // 将文件添加到 FormData 中 }); formData.append('relatedId', this.relatedId); // 添加相关ID参数 formData.append('scope', this.scope); // 添加作用域参数 axios.post(process.env.VUE_APP_BASE_API + '/upload/image', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(response => { console.log('上传成功:', response.data); // 输出上传成功的响应数据 }).catch(error => { console.error('上传失败:', error); // 输出上传失败的错误信息 }); } } }; </script> ``` #### 添加自定义参数至 FormData 在 `customUpload` 方法中，通过 `formData.append` 方法将附加参数（如 `relatedId` 和 `scope`）添加到 `FormData` 对象中。这样，当调用接口时，这些参数会与文件主体一同发送给服务器[^1]。 --- ####