Entrar Ainda não tem acesso?
3
respostas

erro ao realizar upload de imagem

por Estudante
| 171.1k xp | 9 posts

Quero atualizar produtos mas a imagem do produto não é enviada.

    const selecionarArquivo = (evento: React.ChangeEvent<HTMLInputElement>) => {
        if (evento.target.files?.length) {
            setImagem(evento.target.files[0])
        } else {
            setImagem(null)
        }
    }

    const aoSubmeterForm = (evento: React.FormEvent<HTMLFormElement>) => {
        evento.preventDefault()

        const formData = new FormData()

        formData.append('nome', nomePrato)
        formData.append('descricao', descricao)
        formData.append('tag', tag)
        formData.append('restaurante', restaurante)

        if (!parametros) {
            if (imagem) {
                formData.append('imagem', imagem)
            }
            http.request({
                url: 'pratos/',
                method: 'POST',
                headers: {
                    'Content-Type': 'multipart/form-data'
                },
                data: formData
            })
                .then(() => {
                    setNomePrato('')
                    setDescricao('')
                    setTag('')
                    setRestaurante('')
                    alert('Prato cadastrado com sucesso!')
                })
                .catch(erro => console.log(erro))
        } else {
            http.put(`pratos/${parametros.id}/`, {
                nome: nomePrato,
                descricao: descricao,
                tag: tag,
                imagem: setImagem,
                restaurante: restauranteEdit
            })
                .then(() => {
                    alert('Prato editado com sucesso!')
                })
                .catch(erro => console.log(erro))
        }
    }
3 respostas
por Larissa Dubiella
| 1349.2k xp | 2816 posts

Olá Isaque! Tudo certinho?

No seu código, no método put, você está definindo a variável imagem com o valor de setImagem, que é uma função de atualização de estado.

Para corrigir esse problema, você deve passar o valor atual da variável imagem para o formData. Você pode fazer isso alterando a linha imagem: setImagem para imagem: imagem na parte do código onde você está realizando a requisição PUT.

Aqui está o trecho de código corrigido:

http.put(`pratos/${parametros.id}/`, {
    nome: nomePrato,
    descricao: descricao,
    tag: tag,
    imagem: imagem,
    restaurante: restauranteEdit
})
    .then(() => {
        alert('Prato editado com sucesso!')
    })
    .catch(erro => console.log(erro))

Espero que isso resolva o seu problema!

Abração.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!
por Estudante
| 171.1k xp | 9 posts

Olá Larissa, tudo sim e você? Já havia testado imagem: imagem esqueci de dizer, no console diz que não é um arquivo

console browser

por Larissa Dubiella
| 1349.2k xp | 2816 posts

Oi Isaque. Também estou bem, obrigada por perguntar.

Entendi!

Nesse caso, parece que o problema está relacionado com o objeto não estar sendo interpretado corretamente como um arquivo. É possível que ele esteja sendo interpretado como FileList, e não como File.

É importante que no seu código você consiga garantir que imagem (ou seja, o valor em evento.target.files[0] seja do tipo File. Acredito que a alteração possa ser mais ou menos assim: 

const selecionarArquivo = (evento: React.ChangeEvent<HTMLInputElement>) => {
    if (evento.target.files?.length) {
        const arquivoSelecionado = evento.target.files[0];
        const arquivoComoFile = new File([arquivoSelecionado], arquivoSelecionado.name);
        setImagem(arquivoComoFile);
    } else {
        setImagem(null);
    }
}

Além disso, vale a pena verificar se o seu backend está configurado para lidar adequadamente com requisições PUT contendo dados do tipo multipart/form-data.

Espero que agora você consiga seguir em seu projeto!