如何在前端（在 React 中）上传文件并将它们发送到后端（Laravel/API）？

Question

我正在尝试将通过我的应用程序中的输入接收到的一些文件托管在云中，但我无法将信息从前端发送到后端。 使用的技术： 前端：ReactJs (TypeScript)、MaterialUi、StyledComponents 后端：REST API（可清洗）

我正在使用 FormData 来接收参数并将它们传递到后端（效果很好，因为在失眠症中进行的测试中，图像会进入云端）：

export default function ModalAnexo(props: ModalAnexoProps) {

  const [cnh, setCnh] = useState('');
  const [cpf, setCpf] = useState('');
  const [rg, setRg] = useState('');

    function salvaranexo(e: FormEvent) {
    e.preventDefault();

    const AnexoData = new FormData();
    AnexoData.append('cnh', cnh);
    AnexoData.append('cpf', cpf);
    AnexoData.append('rg', rg);

    baseUrl
      .post('/anexo/store', AnexoData, {
        headers: { 'Content-Type': 'multipart/form-data', 'Accept':'application/json' },
      })
      .then(() => {
        callModel('Sucesso', 'Cadastro realizado com sucesso.', 'Ok');
        setOpen(false);
      })
      .catch((error) => {
        callModel('Erro', 'Ocorreu um erro', 'OK');
      });
  }

  <form onSubmit={salvaranexo}>
      <DialogTitle id="alert-dialog-title">{'Inserir arquivos:'}</DialogTitle>
      <DialogContent
        style={{
          display: 'grid',
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'center',
          flexWrap: 'wrap',
          gap: '1.3rem',
        }}
      >
        <div>
          <TextField
            id="cnh"
            value={cnh}
            onChange={(e) => setCnh(e.target.value)}
            label="CNH Frente"
            type="file"
            variant="outlined"
            inputProps={{ accept: '.png, .pdf, .jpg, .jpeg' }}
            InputLabelProps={{
              shrink: true,
            }}
          ></TextField>
          <IconButton
            onClick={function resetaCNH() {
              setCnh('');
            }}
            aria-label="delete"
          >
            <DeleteIcon />
          </IconButton>
        </div>
        <div>
          <TextField
            id="cnh2"
            value={cnh2}
            onChange={(e) => setCnh2(e.target.value)}
            label="CNH Verso"
            type="file"
            variant="outlined"
            inputProps={{ accept: '.png, .pdf, .jpg, .jpeg' }}
            InputLabelProps={{
              shrink: true,
            }}
          ></TextField>
          <IconButton
            onClick={function resetaCNH2() {
              setCnh2('');
            }}
            aria-label="delete"
          >
            <DeleteIcon />
          </IconButton>
        </div>
        <div>
          <TextField
            id="cpf"
            value={cpf}
            onChange={(e) => setCpf(e.target.value)}
            label="CPF Frente"
            type="file"
            variant="outlined"
            inputProps={{ accept: '.png, .pdf, .jpg, .jpeg' }}
            InputLabelProps={{
              shrink: true,
            }}
          ></TextField>
          <IconButton
            onClick={function resetaCPF() {
              setCpf('');
            }}
            aria-label="delete"
          >
            <DeleteIcon />
          </IconButton>
        </div>
        <div>

Laravel：

 public function store(Request $request)
  {
    
  $request->file('cnh')->storeAs($request->id_cliente.$request->id_funcionario.'cnhfrente', $request->cnh->getClientOriginalName(), 'gcs');
   
    $data = $request->all();
    return $this->service->store($data);
  }

当我这样做时，在云中，我得到的文件是一个空图像，配置了我在输入中发送的图像的扩展名。

有人知道我该如何解决这个问题吗？

Answer 1

Material UI 的“TextField”组件不适用于输入字段类型 = 文件，因此我将输入更改为另一个并添加代码 onChange={(e) => setCnh(e.target.files[0]) }。