Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá!
Estou fazendo o upload de arquivos com fetch dessa forma
fetch(url, {
method: 'POST',
headers: {'Content-Type': 'multipart/form-data',},
body: formData
}).catch((error) => (console.log("Problemas com o Upload"), error));
estou usando input type=file
e criando uma const formData = new FormData();
mas não faz e não dá nenhum erro.
estou fazendo o upload com a url="http://localhost/dashboard/dados".mas se for mais de um arquivo dá para fazer um for e juntar todos do
input[type="file"]'
>
9 horas atrás, Williams Duarte disse:
Uma coisa que notei no seu código é a definição explícita do cabeçalho 'Content-Type' como 'multipart/form-data'. Na verdade, ao fazer uploads de arquivos usando FormData, é recomendável não definir esse cabeçalho manualmente. Isso porque o navegador precisa adicionar um boundary ao tipo de conteúdo, o que é algo que ele faz automaticamente quando você omite esse cabeçalho.
Aqui vai uma sugestão de como você poderia ajustar o seu código:
const formData = new FormData();
const fileField = document.querySelector('input[type="file"]');
formData.append('file', fileField.files[0]);
fetch('http://localhost/dashboard/dados', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Problemas com o Upload:', error);
});
Com essa abordagem, você deixa que o navegador cuide do cabeçalho **Content-Type** por você. Isso simplifica um pouco as coisas e pode resolver o problema que você está enfrentando.
Além disso, é sempre bom verificar se o servidor está configurado corretamente para aceitar uploads de arquivos e se o endpoint especificado está correto e pronto para lidar com solicitações POST multipart/form-data.
Se mesmo assim você continuar tendo problemas, uma boa dica é verificar os logs do servidor para mais detalhes sobre o que pode estar errado.
Espero que essa dica te ajude a resolver o problema! Se tiver mais alguma dúvida ou se algo não estiver claro, sinta-se à vontade para perguntar.
Boa sorte com o seu projeto!
mas se for mais de um arquivo dá para fazer um for e juntar todos do input[type="file"]'
A lógica é bem parecida com a de um único arquivo, só que você vai incluir mais de um arquivo no formData.
No input no seu HTML adicione o atributo multiple
<input multiple type="file">
Agora, pegue os arquivos do input.
const fileInput = document.querySelector('input[type="file"][multiple]');
Adicione cada arquivo ao formData
Array.from(fileInput.files).forEach((file, index) => {
// Aqui, 'files[]' é o nome do campo que será usado pelo servidor para receber os arquivos.
// O uso de '[]' indica que é um array de arquivos. O nome exato depende da API do servidor.
formData.append('files[]', file);
});O restante é praticamente igual!
Fóruns exigem esforço próprio; não esperem soluções prontas. Pesquise para aproveitar bem.
>
7 horas atrás, Williams Duarte disse:
A lógica é bem parecida com a de um único arquivo, só que você vai incluir mais de um arquivo no formData.
No input no seu HTML adicione o atributo multiple
<input multiple type="file">
Agora, pegue os arquivos do input.
const fileInput = document.querySelector('input[type="file"][multiple]');
Adicione cada arquivo ao formData
Array.from(fileInput.files).forEach((file, index) => {
// Aqui, 'files[]' é o nome do campo que será usado pelo servidor para receber os arquivos.
// O uso de '[]' indica que é um array de arquivos. O nome exato depende da API do servidor.
formData.append('files[]', file);
});O restante é praticamente igual!
Fóruns exigem esforço próprio; não esperem soluções prontas. Pesquise para aproveitar bem.
só está dando o seguinte erro: Problemas com o Upload: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON não consegui achar o problema
>
2 horas atrás, belann disse:
só está dando o seguinte erro: Problemas com o Upload: SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON não consegui achar o problema
O erro "Unexpected token ... sugere que o seu código esperava JSON, mas recebeu HTML, provavelmente de uma página de erro (como 404 ou 500). Isso ocorre ao tentar converter a resposta do servidor em JSON quando a URL está errada ou o servidor não responde corretamente. Verifique a URL e as configurações do servidor para garantir que aceitam uploads POST e retornam JSON.
fetch('http://localhost/dashboard/dados', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Houve um problema com a resposta da rede');
}
// Verifica se a resposta é JSON antes de tentar converter
const contentType = response.headers.get('content-type');
if (contentType && contentType.includes('application/json')) {
return response.json();
} else {
throw new Error('Não é JSON: ' + contentType);
}
})
.then(data => {
console.log('Sucesso:', data);
})
.catch(error => {
console.error('Problemas com o Upload:', error);
});
Entenda, quando você faz o upload de arquivos para um servidor usando PHP ou Node.js, a resposta esperada geralmente **depende** de como você configurou o servidor para lidar com o upload e o que você precisa fazer com os arquivos após recebê-los. Abaixo estão exemplos de respostas que você pode esperar de cada um:
Exemplo de Resposta do PHP:
<?php 'success' => true,
'message' => 'Upload realizado com sucesso!',
'fileInfo' => [
'name' => $_FILES['file']['name'],
'size' => $_FILES['file']['size'],
'type' => $_FILES['file']['type'],
]
];
header('Content-Type: application/json');
echo json_encode($response);
Exemplo de Resposta do Node.js com Express:
app.post('/upload', upload.single('file'), (req, res) => {
// Processamento do upload...
// Supondo que tudo correu bem
res.json({
success: true,
message: 'Upload realizado com sucesso!',
fileInfo: {
name: req.file.originalname,
size: req.file.size,
type: req.file.mimetype,
}
});
});
Obs.: Diferentes frameworks têm a capacidade de ajustar automaticamente seus comportamentos com base nos cabeçalhos HTTP recebidos, o que significa que não existe uma única abordagem padrão aplicável a todos os casos.>
21 horas atrás, Williams Duarte disse:
O erro "Unexpected token ... sugere que o seu código esperava JSON, mas recebeu HTML, provavelmente de uma página de erro (como 404 ou 500). Isso ocorre ao tentar converter a resposta do servidor em JSON quando a URL está errada ou o servidor não responde corretamente. Verifique a URL e as configurações do servidor para garantir que aceitam uploads POST e retornam JSON.
fetch('http://localhost/dashboard/dados', {
method: 'POST',
body: formData
})
.then(response => {
if (!response.ok) {
throw new Error('Houve um problema com a resposta da rede');
}
// Verifica se a resposta é JSON antes de tentar converter
const contentType = response.headers.get('content-type');
if (contentType && contentType.includes('application/json')) {
return response.json();
} else {
throw new Error('Não é JSON: ' + contentType);
}
})
.then(data => {
console.log('Sucesso:', data);
})
.catch(error => {
console.error('Problemas com o Upload:', error);
});
Entenda, quando você faz o upload de arquivos para um servidor usando PHP ou Node.js, a resposta esperada geralmente **depende** de como você configurou o servidor para lidar com o upload e o que você precisa fazer com os arquivos após recebê-los. Abaixo estão exemplos de respostas que você pode esperar de cada um:
Exemplo de Resposta do PHP:
<?php 'success' => true,
'message' => 'Upload realizado com sucesso!',
'fileInfo' => [
'name' => $_FILES['file']['name'],
'size' => $_FILES['file']['size'],
'type' => $_FILES['file']['type'],
]
];
header('Content-Type: application/json');
echo json_encode($response);
Exemplo de Resposta do Node.js com Express:
app.post('/upload', upload.single('file'), (req, res) => {
// Processamento do upload...
// Supondo que tudo correu bem
res.json({
success: true,
message: 'Upload realizado com sucesso!',
fileInfo: {
name: req.file.originalname,
size: req.file.size,
type: req.file.mimetype,
}
});
});
Obs.: Diferentes frameworks têm a capacidade de ajustar automaticamente seus comportamentos com base nos cabeçalhos HTTP recebidos, o que significa que não existe uma única abordagem padrão aplicável a todos os casos.
Eu fiz deu essa mensagem: Upload: Error: Não é JSON: text/html;charset=UTF-8>
Em 17/02/2024 at 19:24, belann disse:
Eu fiz deu essa mensagem: Upload: Error: Não é JSON: text/html;charset=UTF-8
O problema está no retorno, não no script js, é como eu disse antes:
" resposta esperada geralmente depende de como você configurou o servidor para lidar com o upload"
Uma coisa que notei no seu código é a definição explícita do cabeçalho 'Content-Type' como 'multipart/form-data'. Na verdade, ao fazer uploads de arquivos usando FormData, é recomendável não definir esse cabeçalho manualmente. Isso porque o navegador precisa adicionar um boundary ao tipo de conteúdo, o que é algo que ele faz automaticamente quando você omite esse cabeçalho.
Aqui vai uma sugestão de como você poderia ajustar o seu código: