英文:
POST. The request body is multipart/form-data with two parts, the file's bytes (file), and an optional JSON string (document) with the metadata
问题
以下是您要翻译的部分：
What am I supposed to send as the request body. I keep getting 400 Bad request. I have tried it on Postman as well as in an html file with JavaScript code in the script tag.
我应该发送什么作为请求主体？我一直收到400 Bad request错误。我在Postman上尝试过，也在一个包含JavaScript代码的HTML文件中尝试过。
What does it mean by the file's bytes? A file as a byte array?
文件的字节是什么意思？文件作为字节数组？
I also tried using Postman with a key (type: file) and a file. Got BAD_REQUEST.
我还尝试在Postman中使用一个键（类型：文件）和一个文件，但得到了BAD_REQUEST错误。
I tried creating Blobs and converting them into a byte array, appended those arrays into FormData, and then provided them as the request body using JSON.stringify().
我尝试创建Blob并将其转换为字节数组，然后将这些数组附加到FormData中，然后使用JSON.stringify()提供它们作为请求主体。
The current code, however, takes a file input from an HTML form tag.
然而，当前的代码从HTML表单标签中获取文件输入。
Nothing seems to be working.
似乎什么都不起作用。
Also, how do I write a curl command for this POST method? And how to get a document's metadata.
还有，我如何编写用于此POST方法的curl命令？以及如何获取文档的元数据。
英文:
What am I supposed to send as the request body. I keep getting 400 Bad request. I have tried it on Postman as well as in a html file with javascript code in the script tag.
What does it mean by the file's bytes? A file as a byte array?
I also tried using postman with a key (type: file) and a file. Got BAD_REQUEST
I tried creating Blobs and converted them into byte array, append those arrays into formdata and then provide them as request body using JSON.stringify().
The current code however takes a file input from a form html tag.
Nothing seems to be working.
Also how do I write a curl command for this POST method. And how to get a document's metadata.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form action="" enctype="multipart/form-data" id="FORM">
<div>
<label for="">File Name:</label>
<input type="text" id="FileName">
<label for="">File:</label>
<input type="file" id="File">
<button type="submit" style="" id="submitB">Submit</button>
</div>
</form>
</body>
<script>
const formData = new FormData();
const formDataTwo = new FormData();
const formDataThree = new FormData();
const fileOne = new Blob(["John","117"],{type:'text/html'});
const fileTwo = new Blob(["Commander", "Zavala"], { type: 'text/html' });
const fileThree = new Blob(["Ikora", "Rey"], { type: 'text/html' });
var reader = new FileReader();
reader.readAsArrayBuffer(fileOne);
var byteOne = [];
reader.onloadend = function(e){
if(e.target.readyState == FileReader.DONE){
var arrayBuffer = e.target.result;
array = new Uint8Array(arrayBuffer);
}
for(var i=0; i<array.length;i++){
byteOne.push(array[i]);
}
}
var readerOne = new FileReader();
readerOne.readAsArrayBuffer(fileTwo)
var byteTwo = [];
readerOne.onloadend = function (e) {
if (e.target.readyState == FileReader.DONE) {
var arrayBuffer = e.target.result;
array = new Uint8Array(arrayBuffer);
}
for (var i = 0; i < array.length; i++) {
byteTwo.push(array[i]);
}
}
var form = document.getElementById('FORM')
form.onsubmit = async (e) =>{
e.preventDefault()
const form = e.currentTarget;
var readerTwo = new FileReader();
readerTwo.readAsArrayBuffer(document.getElementById('File').files[0]);
let byteThree = [];
const formDataNew = new FormData();
readerTwo.onloadend = function (e) {
if (e.target.readyState == FileReader.DONE) {
var arrayBuffer = e.target.result;
array = new Uint8Array(arrayBuffer);
}
for (var i = 0; i < array.length; i++) {
byteThree.push(array[i]);
}
formDataNew.append('additionalProp1', byteThree)
}
const obj = {
additionalProp1: formDataNew
}
fetch('http://localhost:8080/o/headless-delivery/v1.0/sites/20121/documents', {
method: "POST",
headers: {
"Content-Type": "multipart/form-data",
"Authorization": `Basic ${btoa('test@oscorp.com:learn')}`
},
body: JSON.stringify(obj)
})
.then(Response => Response.json())
.then(json => console.log(json));
}
// formData.append('fileOne', byteOne);
// formDataTwo.append('fileTwo', byteTwo);
// formDataThree.append('fileThree', byteThree);
</script>
</html>
The Postman api request worked after I modified the key name as instructed. But the html page still won't work. I keep getting Error code 400. My current js code is below. Also find the working Postman request screenshots below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
var form = document.getElementById('FORM')
form.onsubmit = async (e) =>{
e.preventDefault()
const file = document.querySelector("input[type=file]").files[0];
const metadata = {additionalProp1: "string" };
const body = new FormData();
body.append("file", file);
body.append("document", JSON.stringify(metadata));
fetch("http://localhost:8080/o/headless-delivery/v1.0/sites/20121/documents", {
method: "POST",
headers: {
"Content-Type": "multipart/form-data",
"Authorization": `Basic ${btoa('test@oscorp.com:learn')}`
},
body
})
.then(Response => Response.json())
.then(json => console.log(json))
}
<!-- end snippet -->
答案1
得分: 2
糟糕的API文档，尤其是示例部分可能会真正妨碍使用。
从仅仅描述中看...
> 请求体必须是multipart/form-data，包含两个部分，文件的字节（file）和可选的JSON字符串（document）与元数据。
更新：从下面的评论中看来，document 也应该是一个文件 🤔;
我会假设你需要类似这样的内容...
document.getElementById("FORM").addEventListener("submit", async (e) => {
e.preventDefault();
const file = document.getElementById("File").files[0];
// 这只是一个示例
const metadata = { additionalProp1: "string" };
// 为JSON文档创建一个File对象
const doc = new File([JSON.stringify(metadata)], "metadata.json", {
type: "application/json",
});
const body = new FormData();
body.append("file", file);
body.append("document", doc);
const res = await fetch("http://localhost:8080/o/headless-delivery/v1.0/sites/20121/documents", {
method: "POST",
headers: {
authorization: `Basic ${btoa('test@oscorp.com:learn')}`,
},
body,
});
if (!res.ok) {
throw an Error(`${res.status} ${res.statusText}: ${await res.text()}`);
}
console.log("成功！", await res.json());
});
请注意，这里没有content-type header。当使用FormData主体时，浏览器能够自动提供正确的值。更多细节请参见此答案。
我认为你可以忽略他们提供的任何示例。它们似乎与描述完全不符。
在Postman中，你可以像这样使用form-data
| 键 | 值 | 描述 |
|---|---|---|
| file | NewDoc.txt |
一个文件 |
| document | metadata.json |
一个JSON文件 |
你需要确保document 是格式正确的JSON。
英文:
Bad API documentation, especially examples can be a real hindrance.
From reading just the description...
> The request body must be multipart/form-data with two parts, the file's bytes (file), and an optional JSON string (document) with the metadata.
Update: from comments below it seems that document should also be a file 🙄
I would assume you'd need something like this...
document.getElementById("FORM").addEventListener("submit", async (e) => {
e.preventDefault();
const file = document.getElementById("File").files[0];
// this is just an example
const metadata = { additionalProp1: "string" };
// create a File object for the JSON document
const doc = new File([JSON.stringify(metadata)], "metadata.json", {
type: "application/json",
});
const body = new FormData();
body.append("file", file);
body.append("document", doc);
const res = await fetch("http://localhost:8080/o/headless-delivery/v1.0/sites/20121/documents", {
method: "POST",
headers: {
authorization: `Basic ${btoa('test@oscorp.com:learn')}`,
},
body,
});
if (!res.ok) {
throw new Error(`${res.status} ${res.statusText}: ${await res.text()}`);
}
console.log("Success!", await res.json());
});
Note that there is no content-type header added. The browser is able to provide the correct value automatically when using a FormData body. See this answer for more details.
I think you can ignore any examples they offer. They don't appear to match the description at all.
In Postman, you'd use form-data like this
| Key | Value | Description |
|---|---|---|
| file | NewDoc.txt |
A file |
| document | metadata.json |
A JSON file |
It would be up to you to ensure document is properly formatted JSON.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论