вы не можете использовать данные формы для такой реакции, сначала вы должны обработать ваш imageFile и сделать объект e Blob из запрошенного изображения, а затем отправить объект blob изображения, который вы только что создали, в объект данных формы (добавить этот Blob к свойству «file» данных формы вместо непосредственного добавления изображения запроса) эти функции могут помочь вам выполнить преобразование в BLOB-объекты для ваших изображений:
function dataURLtoBlob(dataURL) {
const binary = atob(dataURL.split(',')[1]);
const array = [];
const length = binary.length;
let i;
for (i = 0; i < length; i++) {
array.push(binary.charCodeAt(i));
}
return new Blob([new Uint8Array(array)]);
}
следующие две функции - создать изображение из вашего введенного изображения и получить для него dataUrl из программы чтения файлов, чтобы использовать его в вышеуказанной функции для преобразования в BLOB-процесс. Первая функция - это основная функция, которая вызывается с того места, где вы вводите изображение от пользователя:
export function processFile(file) {
return new Promise((resolve, reject) => {
try {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onloadend = async function() {
const processedFile = await handleImage(reader.result);
resolve(processedFile);
};
} catch (err) {
reject(err);
}
});
}
тогда:
async function handleImage(dataURL) {
const image = new Image();
image.src = dataURL;
return new Promise((resolve, reject) => {
image.onload = function() {
resolve(dataURLtoBlob(dataURL, fileType));
};
image.onerror = reject;
});
}
для остальной части вашего кода, если вы получаете изображения из ввода, вы можете использовать event.target.files [0] из события, прикрепленного к вашему входному изменению файла, чтобы отправить его как переменную файла в функции processFile выше, а затем добавьте его к данным вашей формы:
первый:
imageData = await processFile(fileData);
, а затем из вашего кода данных формы:
form.append('file', imageData);