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

问题描述

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

我正在使用 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>

拉拉维尔：

 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);
  }

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

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

标签： reactjslaravelinput

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

问题描述

解决方案

推荐阅读