es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Cómo cargar correctamente datos de archivos utilizando axios en el backend de Rails 5

10 Jun, 2023 Programación

Quiero que los usuarios puedan subir una foto a mi proyecto y que se agregue a su perfil. Creo que podría estar haciendo la llamada de axios incorrectamente, porque he intentado averiguar cómo hacer esto basándome en una mezcla de otras respuestas en Stack Overflow.

Aquí está el controlador onSubmit para el pequeño formulario:

const handleSubmit = (e) => {
    e.preventDefault();
    const user = { user: avatarUser };
    const formData = new FormData();
    formData.append('user[profpic]', file)
    formData.append('_method', 'PATCH')
    user.user.profpic = formData;
    addFileToProfile(user).then(closeModal());
  };

Aquí está la llamada de axios:

export const addFileToProfile = (user) =>
  axios
    .post(`/api/users/${user.user.id}`, user, {
      headers: { 'Content-Type': 'multipart/form-data' },
    })

El controlador es bastante estándar, estoy usando strong params por lo que es por eso que estoy anidando los datos bajo la clave de ‘usuario’. He estado usando rutas para crear y cambiar usuarios con éxito, así que no creo que el controlador sea el problema. Publicaré la acción de actualización solo en caso de que, pero está funcionando para cosas que no sean esto.

def update
    @user = User.find(params[:id])
    if @user.update(user_params)
      render "api/users/show"
    else
      render json: @user.errors.full_messages, status: 422
    end
end

Mis registros del servidor son bastante sospechosos; parece que por alguna razón lo que envié usando axios desencadenó una solicitud GET.

Started POST "/api/users/5" for ::1 at 2021-11-27 22:24:06 -0500
Started GET "/[object%20FormData]" for ::1 at 2021-11-27 22:24:06 -0500

Eso es todo. Espero que alguien con más experiencia que yo pueda interpretar los registros allí y averiguar qué hice mal.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Basándonos en el código proporcionado, parece que el problema puede estar en cómo se está pasando el objeto user a la función addFileToProfile. El objeto user parece tener una estructura anidada, donde el archivo que se va a subir está almacenado dentro de un objeto FormData.

    Sin embargo, en la llamada axios, se está pasando todo el objeto user como parámetro de datos para el método post. Esto podría estar causando problemas con cómo se procesan los datos por parte del servidor.

    Una solución potencial sería extraer el objeto FormData del objeto user y pasarlo como parámetro de datos en su lugar. Aquí hay una versión actualizada de la función handleSubmit que debería lograr esto:

    const handleSubmit = (e) => {
  e.preventDefault();
  const formData = new FormData();
  formData.append("profpic", file);
  formData.append("_method", "PATCH");

  addFileToProfile(formData).then(closeModal());
};

    Y aquí está la llamada axios actualizada:

    export const addFileToProfile = (formData) =>
  axios.post(`/api/users/${currentUser.id}`, formData, {
    headers: { "Content-Type": "multipart/form-data" },
  });

    Observa que el objeto formData se está pasando directamente como segundo parámetro para el método post, y no anidado dentro del objeto user.

    Ten en cuenta que esta es solo una solución potencial, y puede haber otros problemas en juego. Comprobar los registros del servidor y depurar el código más a fondo puede ser necesario para identificar la causa raíz del problema.

Comments are closed.