要在 JavaScript 中发起一个 HTTP POST 请求以上传文件, 你可以使用 FormData 对象并结合 XMLHttpRequest 对象来实现。以下是一个示例：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
// 从HTML中获取文件和其他参数 var fileInput = document.getElementById('fileInput'); // 获取文件上传的input元素 var file = fileInput.files[0]; var param1 = 'value1'; var param2 = 'value2'; // 创建一个 FormData 对象 var formData = new FormData(); formData.append('file', file); formData.append('param1', param1); formData.append('param2', param2); // 设置POST请求的URL var url = "your-post-url"; // 发起POST请求并获得返回文本值 fetch(url, { method: 'POST', body: formData }).then(function(response) { return response.text(); // 解析文本返回值 }).then(function(text) { console.log(text); // 这里的text就是从服务器返回的文本值 }).then(function(data) { console.log(data); // 这里的text就是从服务器返回的文本值 }).catch(function(error) { console.error('发生错误', error); }); |
在这个示例中，我们首先获取了要上传的文件，然后创建了一个FormData对象并将文件添加到其中。接下来，我们创建了一个新的XMLHttpRequest对象，设置了POST请求的URL，并通过xhr.send(formData)方法将文件上传到指定的URL。此外，我们还设置了一个监听器来跟踪上传进度和处理上传完成后的操作。
使用FormData和XMLHttpRequest对象能够很方便地实现文件上传功能。
当response.text()返回[object Promise]时，通常是因为text()方法返回的是一个 Promise 对象，而不是实际的文本内容。这通常是因为text()方法本身返回一个 Promise，因为网络请求是异步操作，需要一段时间来获取服务器的响应。
为了获取实际的文本内容，你需要使用 Promise 对象的then方法来获取异步操作返回的值。例如：
|
1 2 3 4 5 6 7 8 |
fetch(url) .then(function(response) { return response.text(); // 返回一个 Promise 对象 }) .then(function(text) { console.log(text); // 这里的text就是从服务器返回的文本值 }); |
在这段代码中，then 方法用于处理通过 response.text() 返回的 Promise 对象。第一个 then 中，response.text() 返回的 Promise 对象被传递到一个匿名函数中，然后在这个函数中我们继续处理。当 Promise 对象解析为实际的文本内容时，它会被传递给下一个 then 方法中的回调函数，以供进一步处理或利用。
在第二个 then 方法中，我们访问到了最终的文本内容，并将其传递给一个回调函数，这里我们使用 console.log 来展示它。你也可以在这个回调函数中执行任何其他操作，比如将文本内容放入页面中的某个元素中，或者进行其他处理。
这个例子展示了如何使用 Promise 链，通过 then 方法来获取最终的文本值，并进一步处理它们。
Views: 3