HTML Метод запроса POST возвращает статус 200, а файл не обновляется - PullRequest
3 голосов
/ 07 февраля 2020

Я работаю в системе для загрузки изображения на сервер. Когда файл не существует на сервере, клиент получает код состояния 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);

Это все еще не работает.

...