Я работаю в системе для загрузки изображения на сервер. Когда файл не существует на сервере, клиент получает код состояния 404. Когда на сервере есть файл, имя которого совпадает с именем файла, который клиент запрашивает для обновления, он получает код состояния 200, но файл не имеет обновление на сервере, просто без изменений.
Код:
HTML Ввод:
<form enctype="multipart/form-data" method="post" id="pfp-upload">
<p>Please upload your new profile picture:</p>
<input type="file" class="form-control-file" id="new-pfp" accept="image/x-png,image/jpeg">
</form>
<button type="button" class="btn btn-primary" title="Popover title" data-content="" onclick="updatePfp(document.getElementById('pfp-upload') ,document.getElementById('new-pfp'))">Save changes</button>
JavaScript код работает при нажатии кнопки отправки :
async function updatePfp(form, pfp) {
var formData = new FormData(form);
let photo = pfp.files[0];
console.log(photo);
var oReq = new XMLHttpRequest();
oReq.open("POST", "/media/" + photo.name, true);
oReq.onload = function(oEvent) {
if (oReq.status == 200) {
console.log("File uploaded!");
} else {
console.log("There was an error (" + oReq.status + ") while sending the file!");
}
};
oReq.send(formData);
}
Вывод на консоль, когда файл не существует на сервере:
File {name: "mainmenu.png", lastModified: 1567069340052, lastModifiedDate: Thu Aug 29 2019 12:02:20 GMT+0300 (Israel Daylight Time), webkitRelativePath: "", size: 1617, …}
POST http://domainCensored/media/mainmenu.png 404 (Not Found)
There was an error (404) while sending the file!
Вывод на консоль, когда файл существует на сервере:
File {name: "mainmenu.png", lastModified: 1567069340052, lastModifiedDate: Thu Aug 29 2019 12:02:20 GMT+0300 (Israel Daylight Time), webkitRelativePath: "", size: 1617, …}
File uploaded!
После этого вывода ничего не изменилось на сервере.
РЕДАКТИРОВАТЬ: После нескольких шагов, я получил следующее:
JavaScript код:
async function updatePfp(form, pfp) {
var formData = new FormData();
let photo = pfp.files[0];
formData.append('myFile', photo);
console.log(photo);
fetch('/media/' + photo.name, {
method: 'POST',
body: formData,
}).then(response => {
return response.text();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});
}
Вывод на консоль (когда файл с тем же именем находится на сервере):
File {name: "mainmenu.png", lastModified: 1567069340052, lastModifiedDate: Thu Aug 29 2019 12:02:20 GMT+0300 (Israel Daylight Time), webkitRelativePath: "", size: 1617, …}
После этой строки есть еще одна пустая строка, chrome говорит, что это из этой строки:
console.log(data);
Это все еще не работает.