我想在表单中上传图像,但一段时间后我知道在 multipart/form-data 中我需要使用 formData。在我的代码中使用 formData 后,我发现空值被发送到数据库中。然后我尝试将 console.log 写入 formData,但它是空的。我现在不知道该怎么办。
注意:我在后端使用了multer来处理图片上传,所以后端没有任何问题。
这是我的提交句柄
const handlesubmit = async (e) => {
e.preventDefault();
try {
setshowloader(true);
const data = {
en_name: engName,
hi_name: hiName,
employeeID: EID,
AadharNo: aadharNo,
ContactNo: contactNo,
employeeStatus: empStatus,
address: address,
city: city,
state: state,
designation: designation,
employeeSalary: salary,
Email: email,
department: dept,
joiningDate: joinDate,
employeeType: emplType,
BankName: bankName,
BankBranch: bankBranch,
IFSC_Code: bankIfsc,
AccountNo: accNumber,
AccountHolderName: accHolderName,
employeePhoto: empPhoto,
};
const formData = new FormData();
for (const key in data) {
console.log(`Key: ${key}, Value: ${data[key]}`);
formData.append(key, data[key]);
}
console.log(formData)
serverInstance('hr/add-employee', 'post', formData).then((res) => {
if (res?.status) {
console.log(res.msg);
setOpen(false);
setshowloader(false);
Swal.fire('Great!', res?.msg, 'success');
handleClose();
}
if (res?.status === false) {
console.log(res.message);
setOpen(false);
setshowloader(false);
Swal.fire('Error', res?.msg, 'error');
}
});
} catch (error) {
console.log('catch' + error)
Swal.fire('Error!', error, 'error');
}
};
这是我的服务器实例
import { backendApiUrl } from '../config/config';
export const serverInstance = (path, method = 'get', payload, token) => {
let headers = {
'Content-Type': 'application/json',
Authorization: `Bearer ${sessionStorage.getItem('token')}`,
};
return new Promise((resolve, reject) => {
let fetchOptions = {
method,
headers,
};
if (payload) fetchOptions.body = JSON.stringify(payload);
fetch(backendApiUrl + path, fetchOptions)
.then((res) => resolve(res.json()))
.catch((err) => reject(err));
});
};
表单数据没有附加?或者我还需要做其他事情吗?