表单提交后新增接口无法获取上传文件的值，有哪些更好的解决方案？
用户提交包含文件上传字段的表单时，通常会同时调用上传接口和新增接口。然而，新增接口常常无法立即获取上传图片的地址。虽然使用setTimeout函数延迟执行新增接口可以解决问题，但这并非最佳方案。以下是一些更优的解决方法：
1. 使用Promise.all()实现并发处理：
此方法允许同时执行上传和新增操作，并在两者都完成后再进行后续处理。
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
const uploadPromise = uploadImg(formData, 'customer'); // 上传图片接口
const addPromise = add(); // 新增数据接口
Promise.all([uploadPromise, addPromise])
.then((responses) => {
const imageUrl = responses[0].data[0].url; // 获取上传图片地址
const addResponse = responses[1]; // 新增接口响应
// 使用 imageUrl 和 addResponse 进行后续处理
})
.catch((error) => {
// 处理错误
});
});
2. 在then()回调中调用新增接口：
这种方法在上传接口成功返回图片地址后，再调用新增接口，确保新增接口可以获取到正确的图片地址。
if (this.file) {
let formData = new FormData();
formData.append('file', this.file); // 注意这里应该是'file'而不是'url'
uploadImg(formData, 'customer')
.then((response) => {
this.fileInModel.content = response.data[0].url;
this.add(this.fileInModel); // 将包含图片url的对象传递给新增接口
})
.catch((error) => {
// 处理错误
});
}
3. 使用Axios的transformRequest选项：
此方法允许在发送请求之前修改请求数据，可以将上传文件和表单数据合并到一个FormData对象中，一次性提交给新增接口。 这需要后端接口能够同时处理文件上传和表单数据。
axios.post('/add', formdata, { // formdata 应为 FormData 对象，包含文件和表单数据
transformRequest: [
(data) => {
// 这里不需要再手动创建FormData，因为data本身就是FormData对象
return data;
},
],
});
选择哪种方法取决于你的后端接口设计和前端架构。如果后端接口设计为分别处理上传和新增操作，则方法1或2更合适；如果后端接口设计为同时处理上传和新增操作，则方法3更简洁高效。 记住，方法2和3中的formData.append方法的第一个参数应该反映你的后端接口期望的字段名，通常是'file'或类似的名称，而不是'url'。 并且确保你的后端接口能够正确处理FormData对象。
