如何使用React Hooks实现图片上传提交功能

我有一段图片上传的UI代码：

<p className="key">Şəkil <span className="makeRed">*</span></p>
<div className="value valueFile">
  <button className="uploadImg">
    <input className="fileUpload" type="file" placeholder="Şəkil yükləyin"/>
    <p>Şəkil yükləyin</p>
  </button>
</div>
<p className="key"></p>
<div className="value">
  <p className="key"></p>
  <div className="value">JPG , PNG</div>
</div>

我希望基于这段代码，使用React Hooks实现图片的上传提交功能，但不清楚具体的实现方式，请问有什么解决方案吗？

我来帮你一步步实现这个功能，基于你现有的UI代码，用React Hooks完成图片上传和提交的逻辑：

1. 核心思路 #

我们会用useState管理选中的文件、上传状态和结果，通过监听文件输入的onChange事件获取图片，再用fetch把文件以FormData格式提交到后端接口，同时保留你原有的UI样式。

2. 完整实现代码 #

import { useState } from 'react';

const ImageUploadForm = () => {
  // 管理选中文件、上传状态和结果
  const [selectedFile, setSelectedFile] = useState(null);
  const [isUploading, setIsUploading] = useState(false);
  const [uploadMsg, setUploadMsg] = useState('');

  // 处理文件选择事件，同时验证格式
  const handleFileChange = (e) => {
    const file = e.target.files[0];
    if (file) {
      if (file.type === 'image/jpeg' || file.type === 'image/png') {
        setSelectedFile(file);
        setUploadMsg(''); // 清除之前的提示
      } else {
        alert('请选择JPG或PNG格式的图片！');
        setSelectedFile(null);
      }
    }
  };

  // 处理图片上传提交
  const handleSubmitUpload = async () => {
    if (!selectedFile) {
      alert('请先选择要上传的图片！');
      return;
    }

    setIsUploading(true);
    const formData = new FormData();
    formData.append('image', selectedFile); // 这里的`image`是后端接收的字段名，按需修改

    try {
      // 替换成你的实际后端上传接口地址
      const response = await fetch('/api/upload-image', {
        method: 'POST',
        body: formData,
      });

      if (!response.ok) throw new Error('上传请求失败');
      const resData = await response.json();
      
      setUploadMsg('图片上传成功！');
      alert('上传完成！');
      // 可选：上传成功后重置选择状态
      // setSelectedFile(null);
    } catch (error) {
      setUploadMsg(`上传失败：${error.message}`);
      alert(`上传出错：${error.message}`);
    } finally {
      setIsUploading(false);
    }
  };

  return (
    <div className="upload-container">
      <p className="key">Şəkil <span className="makeRed">*</span></p>
      <div className="value valueFile">
        {/* 自定义按钮触发原生文件选择框 */}
        <button 
          className="uploadImg" 
          onClick={() => document.querySelector('.fileUpload').click()}
          disabled={isUploading}
        >
          <input 
            className="fileUpload" 
            type="file" 
            accept="image/jpeg, image/png" // 限制可选文件类型
            onChange={handleFileChange}
            style={{ display: 'none' }} // 隐藏原生输入框，保留自定义UI
          />
          {/* 显示选中的文件名，没有则显示默认提示 */}
          <p>{selectedFile ? selectedFile.name : 'Şəkil yükləyin'}</p>
        </button>
        {/* 添加提交按钮，控制禁用状态 */}
        <button 
          onClick={handleSubmitUpload}
          disabled={!selectedFile || isUploading}
          style={{ marginLeft: '12px', padding: '4px 12px' }}
        >
          {isUploading ? '上传中...' : '提交'}
        </button>
      </div>
      <p className="key"></p>
      <div className="value">
        <p className="key"></p>
        <div className="value">JPG , PNG</div>
      </div>
      {/* 可选：添加图片预览 */}
      {selectedFile && (
        <div style={{ marginTop: '15px' }}>
          <p>预览：</p>
          <img 
            src={URL.createObjectURL(selectedFile)} 
            alt="图片预览" 
            style={{ width: '200px', height: 'auto', border: '1px solid #eee' }}
            onLoad={() => URL.revokeObjectURL(selectedFile)} // 释放临时URL内存
          />
        </div>
      )}
      {/* 显示上传状态提示 */}
      {uploadMsg && <p style={{ color: uploadMsg.includes('成功') ? 'green' : 'red', marginTop: '10px' }}>{uploadMsg}</p>}
    </div>
  );
};

export default ImageUploadForm;

3. 关键细节说明 #

• 文件格式控制：通过accept属性限制可选文件类型，同时在handleFileChange中二次验证，避免用户选择不符合要求的文件。
• 自定义按钮交互：隐藏原生文件输入框，用自定义按钮触发点击，完全保留你原有的UI样式。
• 上传状态管理：用isUploading控制按钮禁用状态，防止重复提交；用uploadMsg展示上传结果反馈。
• 图片预览优化：利用URL.createObjectURL生成临时预览链接，提升用户体验，记得在图片加载完成后释放内存。
• FormData提交：图片文件必须以FormData格式提交，这是后端接收文件的标准方式，注意和后端约定好接收字段名。

4. 后端适配提示 #

确保你的后端接口支持接收multipart/form-data格式的请求，并且能正确解析你设置的文件字段名（示例中是image），根据后端框架的不同，解析方式会略有差异。

内容的提问来源于stack exchange，提问作者Nasir