Question

我正在尝试将图像上传到服务器，但是在Chrome控制台中始终出现错误“ POST http://localhost:3000/images 500（内部服务器错误）@ main.js：19”。

似乎我的应用程序服务器端未收到该图像。当我尝试访问服务器上的文件时，我无法定义（[错误：缺少输入文件]）。当我使用不带客户端javascript的html发布时，图像已成功发布。但是，我想使用客户端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

您要在FormData对象中将files[]附加为数组，但要将请求内容类型设置为image/*。换句话说，您是在告诉服务器您正在发送图像，但实际上是在发送表单数据，格式不同。

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

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

1 个答案: