Diagnosticar upload de imagens no editor React
Use uma imagem pequena e um documento de teste. Este guia trata do exemplo de galeria React e do servidor Express, que são processos separados.
Baixe os exemplos React e Express. Extraia-os em pastas irmãs, adicione os arquivos do editor de avaliação ao exemplo React e instale e execute cada exemplo conforme seu README. Exemplo React · Exemplo Express.
Inicie os dois servidores
Inicie o exemplo Express na porta 5101 e o React na porta 5111. O exemplo React encaminha os seguintes caminhos ao Express. Esse proxy é para desenvolvimento; em produção, configure rotas equivalentes.
// /rte/ and /uploads/ go to the Express sample (node-express, port 5101).
// Keep the trailing slashes: "/rte" alone would also catch /rte-files.js.
proxy: {
"/rte/": "http://localhost:5101",
"/uploads/": "http://localhost:5101",
},Inspecione a requisição
No painel de rede do navegador, teste separadamente inserir, colar e arrastar uma imagem. Sem requisição, verifique o carregamento do script e se o exemplo correto está em execução. Uma URL data indica uma imagem incorporada, não enviada.
O exemplo envia uma requisição multipart com o campo file e, opcionalmente, folder. O manipulador exige status 200 e a propriedade url no JSON. Esse é o contrato do exemplo, não de todos os manipuladores personalizados.
Teste o servidor
Teste o endpoint diretamente com uma imagem real de teste. O nome retornado é um exemplo; abra a URL que seu servidor retornou. Não use imagens de clientes em testes públicos.
curl -F "file=@photo.jpg" http://localhost:5101/rte/upload
{"url":"/uploads/photo-ce99c014.jpg"}Um 400 pode indicar falha na validação da extensão ou dos bytes do arquivo. Um 413 pode vir do proxy, servidor web ou limite do aplicativo. Para 401 ou 403, verifique login, CSRF e permissões da pasta. Uma página HTML de login com status 200 não é um upload bem-sucedido.
Confira a imagem salva
Abra a URL da imagem no editor e na página de leitura. Se houver 404, verifique proxy, prefixo da URL, arquivos estáticos e armazenamento persistente. Salve e recarregue o documento; confira a origem salva da imagem. Uma URL blob é temporária e uma URL data é incorporada. Não desative a sanitização para exibir uma imagem.
Peça ajuda
Ao contatar o suporte, informe versão do editor, framework, ação, status e resposta sem dados sensíveis. Remova tokens, cookies, URLs privadas e conteúdo do documento.