отправка изображения с клиента на серверную часть в узле js - PullRequest
Новая
       12

отправка изображения с клиента на серверную часть в узле js

0 голосов
/ 17 июня 2019

Я пытаюсь загрузить изображение на сервер, но получаю сообщение об ошибке в консоли chrome "POST http://localhost:3000/images 500 (Внутренняя ошибка сервера) @ main.js: 19".

похоже, что серверная часть моего приложения не получает изображение. Когда я пытаюсь получить доступ к файлу на сервере, я получаю неопределенное значение ([Ошибка: отсутствует входной файл]). Когда я публикую html без клиентского JavaScript, изображение будет опубликовано успешно. Тем не менее, я хочу опубликовать изображение, используя js на стороне клиента. Может кто-нибудь помочь мне узнать, что я делаю не так

main.js 

const form = document.querySelector('form')

form.addEventListener('submit', e => {
e.preventDefault()

const files = document.querySelector('[type=file]').files
let req = new XMLHttpRequest();
const formData = new FormData()


let file = files[0]
console.log((file));
formData.append('files[]', file)

req.open("POST", 'http://localhost:3000/images');
req.setRequestHeader('Content-Type', 'image/*');
req.setRequestHeader('Accept', 'image/*');
req.send(formData);
});

index.html 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial- 
scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

<title>Upload Files</title>
</head>

<body>
<form enctype="multipart/form-data">
  <input type="file" name="files[]" multiple />
  <button type="submit" class="btn btn-primary text-center" 
id="queryButton"> Query </button>
</form>

<script src="main.js"></script>
</body>
</html>

1 Ответ

0 голосов
/ 17 июня 2019

Вы добавляете files[] как массив в объект FormData, но вы устанавливаете тип содержимого запроса на image/*.Другими словами, вы говорите серверу, что отправляете изображение, но фактически отправляете данные формы, которые не совпадают с форматом.

Не думаю, что вам нужно устанавливать содержимое-тип;когда вы отправляете объект FormData, XHR самостоятельно установит тип правильно.Поэтому попробуйте полностью удалить заголовок типа контента.Если это не сработает, попробуйте вместо этого использовать тип контента multipart/form-data.

...