面试题：React 中处理文件上传事件的基本步骤

Question

在 React 项目中，简述处理文件上传事件的基本步骤，包括如何在组件中获取文件对象以及准备上传数据。

Answer 1

1. 创建文件输入元素： 在组件的 JSX 中添加 <input type="file" /> 元素。例如：

<input type="file" onChange={handleFileChange} />

2. 定义事件处理函数： 在组件内定义 onChange 事件的处理函数，如 handleFileChange。

import React, { useState } from 'react';

function FileUploadComponent() {
  const [selectedFile, setSelectedFile] = useState(null);

  const handleFileChange = (e) => {
    const file = e.target.files[0];
    setSelectedFile(file);
  };

  return (
    <div>
      <input type="file" onChange={handleFileChange} />
    </div>
  );
}

export default FileUploadComponent;

3. 获取文件对象： 在事件处理函数中，通过 e.target.files 获取选中的文件列表，通常取 e.target.files[0] 来获取第一个选中的文件对象。
4. 准备上传数据：

• FormData 对象：创建一个 FormData 对象，用于存储要上传的数据。

const formData = new FormData();
formData.append('file', selectedFile);

• 添加额外数据（如果需要）：可以继续使用 formData.append 方法添加其他键值对数据，比如：

formData.append('fileName', selectedFile.name);
formData.append('description', 'This is an uploaded file');

5. 上传数据： 使用 fetch 或其他 HTTP 请求库，将 FormData 对象作为请求体发送到服务器。例如：

const handleUpload = () => {
  fetch('/api/upload', {
    method: 'POST',
    body: formData
  })
 .then(response => response.json())
 .then(data => {
    console.log('Upload success:', data);
  })
 .catch(error => {
    console.error('Upload error:', error);
  });
};