ReactJS中如何实现点击图片作为按钮触发文件上传功能？

React 可点击图片上传按钮实现方案 #

你可以通过隐藏原生input[type="file"]元素，给图片绑定点击事件触发隐藏input的文件选择行为实现需求，具体代码如下：

完整代码示例 #

import { useRef } from 'react';
// 替换为你自己的本地图片路径或线上图片地址
import uploadImg from './assets/upload-icon.png';

function ImageUploader() {
  // 关联隐藏的文件上传input的ref
  const fileInputRef = useRef(null);

  // 点击图片时触发input的点击行为，唤起文件选择窗口
  const triggerFileSelect = () => {
    fileInputRef.current?.click();
  };

  // 处理用户选中的文件
  const handleFileChange = (e) => {
    const selectedFile = e.target.files[0];
    if (selectedFile) {
      // 此处编写选中文件后的业务逻辑，比如预览、上传到服务器等
      console.log('选中的文件：', selectedFile);
    }
  };

  return (
    <div className="upload-wrapper">
      {/* 隐藏原生文件上传input，仅用于触发文件选择逻辑 */}
      <input
        type="file"
        ref={fileInputRef}
        style={{ display: 'none' }}
        onChange={handleFileChange}
        {/* 按需设置允许上传的文件类型，不需要可删除该行 */}
        accept="image/jpeg,image/png,.pdf"
        {/* 如需支持多选文件，加上下面这行 */}
        {/* multiple */}
      />
      {/* 可点击的上传图片 */}
      <img
        src={uploadImg}
        alt="点击上传文件"
        onClick={triggerFileSelect}
        style={{ cursor: 'pointer', width: '80px', height: '80px' }}
      />
    </div>
  );
}

export default ImageUploader;

注意事项 #

• 给图片设置cursor: pointer样式，可让用户直观感知该元素可点击，提升交互体验
• accept属性可按需配置，多个允许的类型用英文逗号分隔即可
• 如果需要清空已选中的文件，方便重复选择同一个文件，可以在handleFileChange逻辑末尾加上fileInputRef.current.value = ''

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