Отправка файла в запросе PUT с использованием форм HTML и Ajax

Question

Я пытаюсь отправить файл изображения на внутренний сервер с помощью запроса PUT.

HTML:

<input type="file" name="myFile" id="profilePicInput">

Javacript:

const profileInput = document.getElementById('profilePicInput');
profileInput.addEventListener("change", handleFiles, false);

function handleFiles(){

    const formData = profileInput.files[0];

    $.ajax({
        url: '../uploadImage',    //my servlet url
        type: 'PUT',
        processData: false,
        contentType: false,
        data: {
            data: formData
        }, 
        success: function () {
            console.log("profile pic updated!");
        }
    });
}

ПроблемаЯ сталкиваюсь с тем, что в своем бэкэнд-коде я получаю данные с типом содержимого «text / plain; charset = UTF-8», но мне нужно «multipart / form-data».

Я пробовал две вещи, которые не работали:

1. Использование HTML-форм

   <form id="profilePicForm" action="javascript:handleFiles()" method="post" enctype="multipart/form-data">
       <input type="file" name="myFile" id="profilePicInput">
   </form>
   

   Javascript:

   const profileInput = document.getElementById('profilePicInput');
   profileInput.addEventListener("change", submitForm, false);
   
   function submitForm(){
      document.getElementById("profilePicForm").submit();
   }
   

   Но все же тип содержимого в заголовке запроса говорит «text / plain; charset = UTF-8» в моем запросе PUT.

2. Использование FormData

   function handleFiles(){
   
       const blobFile = profileInput.files[0];
       let formData = new FormData();
       formData.append("fileToUpload", blobFile);
   
   
       $.ajax({
           url: '../uploadImage',    //my servlet url
           type: 'PUT',
           processData: false,
           contentType: false,
           data: {
               data: formData
           }, 
           success: function () {
               console.log("profile pic updated!");
           }
       });
   }
   

   Та же проблема.Тип содержимого в заголовке запроса все еще говорит 'text / plain; charset = UTF-8' в моем запросе PUT.

Поэтому мой вопрос: как вы отправляете файл сcontent-type = multipart / form-data через запрос PUT?

---

ОБНОВЛЕНИЕ :

Решение:

HTML:

<input type="file" name="myFile" id="profilePicInput">

Javascript:

const profileInput = document.getElementById('profilePicInput');
profileInput.addEventListener("change", handleFiles, false);

function handleFiles(){

    let formData = new FormData();
    formData.append("fileToUpload", profileInput.files[0]);

    const xhr = new XMLHttpRequest();
    xhr.open('PUT', '../uploadImage');
    xhr.onload = () => {
        console.log("profile updated");
    };
    xhr.send(formData);

}

Answer 1

См. MDN на Загрузка и выгрузка файлов .

Если вы хотите PUT файл , то вам просто нужно поставить файл и не оборачивать его в контейнер multipart / form-data.

Не используйте FormData , который предназначен для извлечения всех данных из формы, а не просто для отправки одного файла.

const fileToUpload = profileInput.files[0]);
const xhr = new XMLHttpRequest();
xhr.open('PUT', '../uploadImage');
xhr.onload = () => {
    console.log("profile updated");
};
xhr.setRequestHeader("Content-Type", fileToUpload.type);
xhr.send(fileToUpload);

Answer 2

Взгляните на документацию: https://api.jquery.com/jquery.ajax/

В нем говорится, что:

contentType: false,

не будет отправлять тип контента, я бы посоветовал, это означает, что сервер, получающий при этом, по умолчанию,Почему бы не установить тип здесь?

contentType: "multipart/form-data",