ReactJS实现单按钮兼具文件选择与上传功能的方案问询

你可以通过隐藏原生文件输入框，用MUI Button触发文件选择，再在文件选择完成后自动触发上传流程来实现。具体修改如下：

步骤说明 #

• 隐藏原生<input type="file">，不让它在UI中显示
• 让MUI Button点击时触发文件选择弹窗
• 文件选择完成后，自动调用你的上传逻辑

修改后的完整代码 #

import React, { useRef } from 'react';
import Button from '@mui/material/Button';

function Filesubmit() {
  const fileInput = useRef(null);

  // 触发文件选择弹窗
  const handleButtonClick = () => {
    fileInput.current?.click();
  };

  // 文件选择完成后自动执行上传
  async function handleFileChange(event) {
    const selectedFile = event.target.files[0];
    if (!selectedFile) return;
    
    await getSignedUrl(selectedFile);
    // 重置输入框，允许重复选择同一文件
    event.target.value = '';
  }

  async function getSignedUrl(selectedFile) {
    // 替换原有的fileInput.current.files[0]为传入的选中文件
    const fname = JSON.stringify({ app: selectedFile.name });
    // ... 保留你原有的请求签名逻辑 ...
    uploadAPP(url, key, keyID, secToken, policy, signature, selectedFile);
  }

  async function uploadAPP(url_, key_, keyID_, secToken_, policy_, signature_, appFile_) {
    const formdata = new FormData();
    formdata.append('key', key_);
    // ... 保留你原有的FormData组装、请求发送逻辑 ...
    const requestOpts = {
      method: 'POST',
      body: formdata,
      redirect: 'follow',
    };
    // ... 发送上传请求的逻辑 ...
  }

  return (
    <div className="card">
      {/* 隐藏原生文件输入框 */}
      <input
        type="file"
        ref={fileInput}
        onChange={handleFileChange}
        style={{ display: 'none' }}
      />
      <Button
        variant="contained"
        onClick={handleButtonClick}
      >
        上传
      </Button>
    </div>
  );
}

export default Filesubmit;

关键修改点 #

• 给原生文件输入框添加style={{ display: 'none' }}隐藏它，也可以用MUI的styled工具封装样式
• 移除原有的<form>标签，因为现在不需要手动提交，文件选择后自动触发上传
• 新增handleButtonClick函数，触发隐藏的文件输入框点击事件，唤起文件选择弹窗
• 新增handleFileChange函数，在用户选中文件后直接调用上传逻辑，同时重置输入框以支持重复选择同一文件
• 修改getSignedUrl函数，接收选中的文件作为参数，替代原有的fileInput.current.files[0]

这样用户点击“上传”按钮时，会先弹出文件选择窗口，选完文件后自动开始上传流程，UI上仅显示一个按钮。

内容的提问来源于stack exchange，提问作者002 DMAM Jigyasa Nagpal