добавление источника (src) изображения в formData и размещение его в бэкэнде через http post call

Question

У меня есть тег img с src = "fast.jpg". Я хочу, чтобы изображение было выбрано из моей исходной папки, добавлено в данные формы и отправлено через http post call

HTML:

<img src="fast.jpg" data-highres="fast.jpg"  
style="width:150px;height:150px;"id="img1"  onclick="myFunction(this);" >

JavaScript:

var img = document.getElementById($(target).attr("id")).src

console.log("img>>>>",img)

var files = img.files
console.log("files", files)
var formData = new FormData();
formData.append('pic[]', img.name);

console.log("formdata>>", formData) 

почтовый звонок:

    xhttp.open("POST", "http://127.0.0.1:5001/testpost", true);
    xhttp.withCredentials = false;
    xhttp.setRequestHeader("Content-type", "application/json");
    xhttp.setRequestHeader("cache-control", "no-cache", "no-cors");
    xhttp.send(formData);

Answer 1

Сделайте ввод изображения внутри формы с идентификатором и используйте:

<form id="myForm">
  <input type="file" name="myPicture">
</form>

В своем коде js отправьте форму, например, так:

var formData = new FormData( $('form#myForm')[0] );

Answer 2

Вам необходимо добавить Content-type для XMLHttpRequest // Установить информацию заголовка вместе с запросом

http.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

И содержимое вашего файла неверно, вам нужно использовать type="file" для выбора изображения,Тег img только для предварительного просмотра загружаемого изображения.