使用 React.js 上传文件

免费领取国家顶级域名（.cn/.中国）

欢迎加入国家域名信源站点导航

站点智能：AI搭建 AI辅助运营独立站，把生意做到全世界

介绍

您可能从未在 React 或任何其他技术中处理过文件上传，但您很可能会遇到这样的需求，无论是更新用户的个人资料照片、CSV 文件还是 PDF，仅举几例。在本指南中，您将学习如何在 React 应用程序中上传文件。

设置应用程序

首先，在终端中运行以下命令，或访问https://react.new以通过https://codesandbox.io获取完全配置的 React 开发环境。

      npx create-react-app <YOUR_APP_NAME>

<YOUR_APP_NAME>指的是您喜欢的应用程序名称。

接下来，创建一个具有带有上传按钮的文件输入的简单组件。

      import React from 'react';

function FileUploadPage(){
	return(
   <div>
			<input type="file" name="file" onChange={changeHandler} />
			<div>
				<button onClick={handleSubmission}>Submit</button>
			</div>
		</div>
	)
}
    

添加状态

现在向您的应用添加一些状态以包含有关用户选择的文件的信息。

      import React, {useState} from 'react';

function FileUploadPage(){
	const [selectedFile, setSelectedFile] = useState();
	const [isFilePicked, setIsFilePicked] = useState(false);

	return(
   <div>
			<input type="file" name="file" onChange={changeHandler} />
			<div>
				<button onClick={handleSubmission}>Submit</button>
			</div>
		</div>
	)
}
    

selectedFile包含有关当前选定文件的信息。

isFilePicked确定文件是否已被选中。

现在实现handleSubmission和changeHandler事件处理程序，然后添加条件以显示当前选定文件的详细信息。

      import React, {useState} from 'react';

function FileUploadPage(){
	const [selectedFile, setSelectedFile] = useState();
	const [isFilePicked, setIsFilePicked] = useState(false);

	const changeHandler = (event) => {
		setSelectedFile(event.target.files[0]);
		setIsSelected(true);
	};

	const handleSubmission = () => {
	};

	return(
   <div>
			<input type="file" name="file" onChange={changeHandler} />
			<div>
				<button onClick={handleSubmission}>Submit</button>
			</div>
		</div>
	)
}
    

Event.target.files是一个对象，其中包含表单中选择要上传的文件的详细信息。

当前选定的文件对象也如下所示。

      {
		lastModified: 1588350162449
		lastModifiedDate: Fri May 01 2020 17:22:42 GMT+0100 (British Summer Time) {} // Date object
		name: "Pluralsight_logo.png"
		size: 68317
		type: "image/png"
		webkitRelativePath: ""
		__proto__: File
}
    

现在添加条件显示逻辑，向用户提供文件的详细信息。

      import React, {useState} from 'react';

function FileUploadPage(){
	const [selectedFile, setSelectedFile] = useState();
	const [isFilePicked, setIsFilePicked] = useState(false);

	const changeHandler = (event) => {
		setSelectedFile(event.target.files[0]);
		setIsSelected(true);
	};

	const handleSubmission = () => {
	};

	return(
   <div>
			<input type="file" name="file" onChange={changeHandler} />
			{isSelected ? (
				<div>
					<p>Filename: {selectedFile.name}</p>
					<p>Filetype: {selectedFile.type}</p>
					<p>Size in bytes: {selectedFile.size}</p>
					<p>
						lastModifiedDate:{' '}
						{selectedFile.lastModifiedDate.toLocaleDateString()}
					</p>
				</div>
			) : (
				<p>Select a file to show details</p>
			)}
			<div>
				<button onClick={handleSubmission}>Submit</button>
			</div>
		</div>
	)
}
    

使用 Fetch 上传文件

您可以使用 Fetch API 来实现文件上传，也可以使用 Axios 等库来实现上传逻辑。实现onClick处理程序（如下所示）来处理文件上传。

有一项免费服务可以通过其 API 上传文件，因此请继续在此处注册以获取 API 密钥。

      import React, {useState} from 'react';

function FileUploadPage(){
	const [selectedFile, setSelectedFile] = useState();
	const [isFilePicked, setIsFilePicked] = useState(false);

	const changeHandler = (event) => {
		setSelectedFile(event.target.files[0]);
		setIsSelected(true);
	};

	const handleSubmission = () => {
		const formData = new FormData();

		formData.append('File', selectedFile);

		fetch(
			'https://freeimage.host/api/1/upload?key=<YOUR_API_KEY>',
			{
				method: 'POST',
				body: formData,
			}
		)
			.then((response) => response.json())
			.then((result) => {
				console.log('Success:', result);
			})
			.catch((error) => {
				console.error('Error:', error);
			});
	};
	};

	return(
   <div>
			<input type="file" name="file" onChange={changeHandler} />
			{isSelected ? (
				<div>
					<p>Filename: {selectedFile.name}</p>
					<p>Filetype: {selectedFile.type}</p>
					<p>Size in bytes: {selectedFile.size}</p>
					<p>
						lastModifiedDate:{' '}
						{selectedFile.lastModifiedDate.toLocaleDateString()}
					</p>
				</div>
			) : (
				<p>Select a file to show details</p>
			)}
			<div>
				<button onClick={handleSubmission}>Submit</button>
			</div>
		</div>
	)
}
    

这里发生了什么？您结合使用了 fetch API 和FormData原生 Javascript API 将文件发布到文件服务器。

成功发布到服务器应该会产生以下响应。

      {
							"status_code": 200,
							"success": {
								"message": "image uploaded",
								"code": 200
							},
							"image": {
								"name": "example",
								"extension": "png",
								"size": 53237,
								"width": 1151,
								"height": 898,
								"date": "2020-11-11 15:32:33",
								"date_gmt": "2020-11-11 19:32:33",
								"storage_id": null,
								"description": null,
								"nsfw": "0",
								"md5": "d973298h0d722c956c3629870299735830",
								"storage": "datefolder",
								"original_filename": "pluralsight_logo.png",
								"original_exifdata": null,
								"views": "0",
								"id_encoded": "L",
								"filename": "pluralsight_logo.png",
								"ratio": 1.2817371937639,
								"size_formatted": "52 KB",
								"mime": "image/png",
								"bits": 8,
								"channels": null,
								"url": "http://freeimage.host/images/2020/11/11/pluralsight_logo.png",
								"url_viewer": "http://freeimage.host/image/L",
								"thumb": {
									"filename": "example.th.png",
									"name": "example.th",
									"width": 160,
									"height": 160,
									"ratio": 1,
									"size": 17848,
									"size_formatted": "17.4 KB",
									"mime": "image/png",
									"extension": "png",
									"bits": 8,
									"channels": null,
									"url": "http://freeimage.host/images/2020/11/11/pluralsight_logo.th.png"
								},
								"medium": {
									"filename": "pluralsight_logo.md.png",
									"name": "pluralsight_logo.md",
									"width": 500,
									"height": 390,
									"ratio": 1.2820512820513,
									"size": 104448,
									"size_formatted": "102 KB",
									"mime": "image/png",
									"extension": "png",
									"bits": 8,
									"channels": null,
									"url": "http://freeimage.host/images/2020/11/11/pluralsight_logo.md.png"
								},
								"views_label": "views",
								"display_url": "http://freeimage.host/images/2020/11/11/pluralsight_logo.md.png",
								"how_long_ago": "moments ago"
							},
							"status_txt": "OK"
						}
    

结论

就这样结束了。在本指南中，您学习了如何使用 React 上传文件以及如何使用 Fetch API 上传文件。如果您想了解有关 Fetch API 和 formData API 的更多信息，以下资源将有所帮助：

<a href="https://translate.google.com/website?sl=en&tl=zh-CN&hl=zh-CN&client=webapp&u=https://developer.mozilla.org/en-US

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文