1
resposta

Criando uma requisição POST no projeto

Se alguém puder me ajudar a adicionar a imagem da foto dentro db.json eu ficaria muito grato !!!

import ehUmCPF from "./valida-cpf.js";
import ehMaiorDeIdade from "./valida-idade.js";

async function coletandoCadastro(nome, rg, cpf, aniversario, email) {
    const conexao = await fetch("http://localhost:3000/cadastros", {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({
            'nome': nome,
            'rg': rg,
            'cpf': cpf,
            'aniversario': aniversario,
            'email': email
        })
    });

    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}

function verificaCampo(campo) {
    let mensagem = '';
    campo.setCustomValidity('');

    if (campo.name == 'cpf' && campo.value.length >= 11) {
        ehUmCPF(campo);
    };

    if (campo.name == 'aniversario' && campo.value != "") {
        ehMaiorDeIdade(campo);
    };

    tiposDeErro.forEach(erro => {
        if (campo.validity[erro]) {
            mensagem = mensagens[campo.name][erro];

        }
    })

    const mensagemErro = campo.parentNode.querySelector('.mensagem-erro');
    const validadorInput = campo.checkValidity();

    if (!validadorInput) {
        mensagemErro.textContent = mensagem;
        campo.style.border = '2px solid red';

    } else {
        mensagemErro.textContent = '';
        campo.style.border = '2px solid #6BD1FF';
    }

}

const camposDoFormulario = document.querySelectorAll('[required]');
const formulario = document.querySelector('[data-formulario]');

const tiposDeErro = [
    'valueMissing',
    'typeMismatch',
    'patternMismatch',
    'tooShort',
    'customError'
];

const mensagens = {
    nome: {
        valueMissing: "O campo de nome não pode estar vazio.",
        patternMismatch: "Por favor, preencha um nome válido.",
        tooShort: "Por favor, preencha um nome válido."
    },
    email: {
        valueMissing: "O campo de e-mail não pode estar vazio.",
        typeMismatch: "Por favor, preencha um email válido.",
        tooShort: "Por favor, preencha um e-mail válido."
    },
    rg: {
        valueMissing: "O campo de RG não pode estar vazio.",
        patternMismatch: "Por favor, preencha um RG válido.",
        tooShort: "O campo de RG não tem caractéres suficientes."
    },
    cpf: {
        valueMissing: 'O campo de CPF não pode estar vazio.',
        patternMismatch: "Por favor, preencha um CPF válido.",
        customError: "O CPF digitado não existe.",
        tooShort: "O campo de CPF não tem caractéres suficientes."
    },
    aniversario: {
        valueMissing: 'O campo de data de nascimento não pode estar vazio.',
        customError: 'Você deve ser maior que 18 anos para se cadastrar.'
    },
    termos: {
        valueMissing: 'Você deve aceitar nossos termos antes de continuar.',
    }
}
formulario.addEventListener('submit', async (e) => {
    e.preventDefault();

    const listaRespostas = {
        'nome': e.target.elements["nome"].value,
        'rg': e.target.elements["rg"].value,
        'cpf': e.target.elements["cpf"].value,
        'aniversario': e.target.elements["aniversario"].value,
        'email': e.target.elements["email"].value,

    }

    await coletandoCadastro(listaRespostas.nome, listaRespostas.rg, listaRespostas.cpf, listaRespostas.aniversario, listaRespostas.email);

    localStorage.setItem("cadastro", JSON.stringify(listaRespostas));

    window.location.href = "./abrir-conta-form-2.html";
})

camposDoFormulario.forEach((campo) => {
    campo.addEventListener("blur", () => verificaCampo(campo));
    campo.addEventListener("invalid", evento => evento.preventDefault());
});
1 resposta

Olá Fernando, tudo bem? Pelo que entendi, você está tentando adicionar a imagem da foto dentro do arquivo db.json. Para isso, você precisa fazer uma requisição POST para enviar a imagem com os dados do formulário.

Para adicionar uma imagem como URL, você precisa incluir um campo para a imagem no formulário HTML e, em seguida, recuperar o valor da URL no evento de envio do formulário.

  • Adicione um novo campo de entrada para a imagem no formulário HTML:
<label for="imagem">Imagem:</label>
<input type="url" id="imagem" name="imagem" required>

Este campo de entrada requer que a URL seja inserida na forma de uma URL válida.

  • Em seguida, adicione a nova entrada "imagem" ao objeto listaRespostas no evento de envio do formulário:
const listaRespostas = {
    'nome': e.target.elements["nome"].value,
    'rg': e.target.elements["rg"].value,
    'cpf': e.target.elements["cpf"].value,
    'aniversario': e.target.elements["aniversario"].value,
    'email': e.target.elements["email"].value,
    'imagem': e.target.elements["imagem"].value
}
  • Finalmente, modifique o método coletandoCadastro para incluir a nova entrada "imagem" no objeto JSON que é enviado para o servidor:
async function coletandoCadastro(nome, rg, cpf, aniversario, email, imagem) {
    const conexao = await fetch("http://localhost:3000/cadastros", {
        method: "POST",
        headers: {
            "Content-type": "application/json"
        },
        body: JSON.stringify({
            'nome': nome,
            'rg': rg,
            'cpf': cpf,
            'aniversario': aniversario,
            'email': email,
            'imagem': imagem
        })
    });

    const conexaoConvertida = await conexao.json();

    return conexaoConvertida;
}

Com essas alterações, o valor da URL da imagem será incluído no objeto JSON enviado para o servidor ao enviar o formulário. Certifique-se de validar a entrada de URL da imagem usando a mesma lógica usada para as outras entradas de formulário.

Se precisar de ajuda para isso manifeste aqui, pois assim poderei lhe auxiliar melhor.

Em suma era isso, espero que isso ajude! Se tiver alguma dúvida, é só perguntar. Bons estudos!

Caso este post tenha lhe ajudado, por favor marque ele como solução! ✓

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software