在节点js中将图像从客户端发送到服务器端

Question

我正在尝试将图像上传到服务器，但 chrome 控制台 "POST http://localhost:3000/images 500 (Internal Server Error) @ main.js:19" 中一直出现错误。

我的应用程序的服务器端似乎没有接收到 image.when 我尝试访问服务器上的文件但未定义（[错误：输入文件丢失]）。当我 post 在没有客户端 javascript 的情况下使用 html 时，图像已成功 posted。但是，我想 post 使用客户端 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>

Answer 1

您将 files[] 作为数组附加到 FormData object 中，但您将请求 content-type 设置为 image/*。换句话说，你告诉服务器你发送的是一张图片，但实际上你发送的是表单数据，格式不一样。

我认为您不需要设置 content-type；当您发送 FormData object 时，XHR 将自行正确设置类型。因此，请尝试完全删除 content-type header。如果这不起作用，请尝试使用 multipart/form-data 的 content-type。

在节点js中将图像从客户端发送到服务器端

sending an image from client to server-side in node js

javascript

frontend

backend

node.js