Fetch API - 上传文件_AJAX 菜鸟教程

Fetch API 提供了一种灵活的方法来创建 HTTP 请求，该请求会将文件上传到服务器。我们可以将 fetch（）函数与 FormData 对象一起使用，在请求中发送单个或多个文件。让我们借助以下示例来讨论这个概念 -

示例 - 上传单个文件

在下面的程序中，我们使用 fetch API 一次上传一个文件。在这里，我们使用 FormData 对象来存储文件，然后使用 fetch（）函数将其发送到给定的 URL，包括 POST 请求方法和 FormData 对象。将请求发送到服务器后，我们现在使用 then（）函数来处理响应。如果我们遇到错误，则该错误由 catch（）函数处理。

<!DOCTYPE html>
<html>
<body>
<!-- Creating a form to upload a file--> 	
<form id = "myForm">
	 	<input type="file" id="file"><br><br>
	 	<button type="submit">Upload File</button>
</form>
<script>
	 	document.getElementById('myForm').addEventListener('submit', function(x){
	 	 	 // Prevent from page refreshing
	 	 	 x.preventDefault();
	 	
	 	 	 // Select the file from the system
	 	 	 // Here we are going to upload one file at a time
	 	 	 const myFile = document.getElementById('file').files[0];
	 	
	 	 	 // Create a FormData to store the file
	 	 	 const myData = new FormData();
	 	
	 	 	 // Add file in the FormData
	 	 	 myData.append("newFiles", myFile);
	 	
	 	 	 // Send the file to the given URL
	 	 	 fetch("https://httpbin.org/post", {
	 	 	 	 	// POST request with Fetch API
	 	 	 	 	method: "POST",	
	 	
	 	 	 	 	// Adding FormData to the request
	 	 	 	 	body: myData
	 	 	 })
	 	 	 // Converting the response in JSON	
	 	 	 // using response.json() function
	 	 	 .then(response => response.json())
	 	 	 .then(finalData => {
	 	 	 	 	// Handling the response
	 	 	 	 	console.log("File has been uploaded successfully");
	 	 	 })
	 	 	 .catch(err=>{
	 	 	 	 	// Handling the error
	 	 	 	 	console.log("Error Found:", err)
	 	 	 });
	 	})
</script>
</body>
</html>

输出

上传文件

示例 − 为单个输入上传多个文件

在下面的程序中，我们将使用 fetch API 从单个输入上传多个文件。这里我们在 <input> 标签中添加一个 “multiple” 属性来添加多个文件。然后我们使用 FormData 对象存储多个文件，然后使用 fetch（）函数将它们发送到给定的 URL，包括 POST 请求方法和 FormData 对象。将请求发送到服务器后，我们现在使用 then（）函数来处理响应。如果我们遇到错误，则该错误由 catch（）函数处理。

<!DOCTYPE html>
<html>
<body>
	 	<!-- Creating a form to upload a file--> 	
	 	<h2> Uploading Multiple files</h2>
	 	<form id = "myForm">
	 	 	 <p>Maximum number of files should be 2</p>
	 	 	 <input type="file" id="file" multiple><br><br>
	 	 	 <button type="submit">Upload File</button>
	 	</form>
<script>
	 	document.getElementById('myForm').addEventListener('submit', function(x){
	 	 	 // Prevent from page refreshing
	 	 	 x.preventDefault();
	 	
	 	 	 // Select the file from the system
	 	 	 // Here we are going to upload multiple files at a time
	 	 	 const myFile = document.getElementById('file').files[0];
	 	
	 	 	 // Create a FormData to store the file
	 	 	 const myData = new FormData();
	 	
	 	 	 // Add file in the FormData
	 	 	 myData.append("newFiles", myFile);
	 	
	 	 	 // Send the file to the given URL
	 	 	 fetch("https://httpbin.org/post", {
	 	 	 	 	// POST request with Fetch API
	 	 	 	 	method: "POST",	
	 	
	 	 	 	 	// Adding FormData to the request
	 	 	 	 	body: myData
	 	 	 })
	 	 	 // Converting the response in JSON	
	 	 	 // using response.json() function
	 	 	 .then(response => response.json())
	 	 	 .then(finalData => {
	 	 	 	 	// Handling the response
	 	 	 	 	console.log("Files has been uploaded successfully");
	 	 	 })
	 	 	 .catch(err=>{
	 	 	 	 	// Handling the error
	 	 	 	 	console.log("Error Found:", err)
	 	 	 });
	 	})
</script>
</body>
</html>

输出

Uploading Files

示例 − 上传多个文件

在下面的程序中，我们将使用 fetch API 上传多个文件。这里我们从 DOM 中的系统中选择两个属性为 file 的文件。然后我们将输入文件添加到数组中。然后我们创建一个 FormData 对象并将输入文件附加到该对象。然后我们使用 fetch（）函数将它们发送到给定的 URL，包括 POST 请求方法和 FormData 对象。将请求发送到服务器后，我们现在使用 then（）函数来处理响应。如果我们遇到错误，则该错误由 catch（）函数处理。

<!DOCTYPE html>
<html>
<body>
	 	<!-- Creating a form to upload multiple files--> 	
	 	<h2> Uploading Multiple files</h2> 	
	 	<input type="file">
	 	<input type="file">
	 	<button>Submit</button>
<script>
	 	const myButton = document.querySelector('button');
	 	myButton.addEventListener('click', () => {
	 	 	 // Get all the input files in DOM with attribute type "file":
	 	 	 const inputFiles = document.querySelectorAll('input[type="file"]');
	 	
	 	 	 // Add input files in the array	
	 	 	 const myfiles = [];
	 	 	 inputFiles.forEach((inputFiles) => myfiles.push(inputFiles.files[0]));
	 	
	 	 	 // Creating a FormData
	 	 	 const myformdata = new FormData();
	 	
	 	 	 // Append files in the FormData object
	 	 	 for (const [index, file] of myfiles.entries()){
	 	 	 	 	// It contained reference name, file, set file name
	 	 	 	 	myformdata.append(`file${index}`, file, file.name);
	 	 	 }
	 	 	 // Upload the FormData object
	 	 	 fetch('https://httpbin.org/post', {
	 	 	 	 	method: "POST",
	 	 	 	 	body: myformdata,
	 	 	 })
	 	 	 // Handle the response
	 	 	 .then(response => response.json())
	 	 	 .then(response => console.log(response))
	 	
	 	 	 // Handle the error
	 	 	 .catch(err => console.log("Error Found:", err))
	 	})
</script>
</body>
</html>

输出

上传文件

结论

所以这就是我们如何在 fetch（） API 的帮助下将文件上传到给定的 URL。在这里，我们可以上传任何类型的文件，如 jpg、pdf、word 等，也可以上传任意数量的文件，例如一次上传一个文件或一次上传多个文件。现在在下一篇文章中，我们将学习 Fetch API 如何处理响应。

<< Fetch API - 自定义请求对象 Fetch API - 处理二进制数据 >>