Saltar al contenido

laravel vuejs/axios put request Formdata está vacío

Agradecemos tu ayuda para compartir nuestras reseñas con relación a las ciencias de la computación.

Solución:

Laravel no puede manejar bien los datos en formato multiparte con el método PUT. Consulte La entrada de solicitudes PUT enviadas como datos de varias partes/formularios no está disponible #13457.

Si su código realmente usa el método PUT, parece estar afectado por este problema.

Hay varias soluciones.

Tratar con el lado del cliente:

  • En lugar del método PUT, use el método POST con _method valor de parámetro establecido en PUT (llamado ‘método de suplantación de identidad’)

Tratando con el lado del servidor:

  • Agregue un paquete que realice un procesamiento de varias partes en Laravel. (por ejemplo, illuminatech/multipart-middleware)
  • Use la extensión pecl/apfd que brinda la capacidad de analizar solicitudes HTTP ‘multipart/form-data’ para cualquier método de solicitud.

he cambiado el axioscall en la publicación y establecer el valor _method:put

addLeads() 
      if (this.edit === false) 
        // add new leads
        this.errors = null;
        const constraints = this.getConstraints();
        const errors = validate(this.$data.form, constraints);
        if (errors) 
          this.errors = errors;
          return;
        
        // multiple file uploading
        this.lead = document.getElementById("leadform");
        const formData = new FormData(this.lead);
        if (this.attachments.length > 0) 
          for (var i = 0; i < this.attachments.length; i++) 
            let attachment = this.attachments[i];
            formData.append("attachments[]", attachment);
          
        
        var config = 
          headers:  "Content-Type": "multipart/form-data" ,
          onUploadProgress: function(progressEvent) 
            this.percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            this.$forceUpdate();
          .bind(this)
        ;
        //end
        this.$store.dispatch("lead");
        formData.append("_method", "post");
        addLeadsAPI(formData, "post", config).then(res => 
          swal("Good job!", "You clicked the button!", "success");
          this.clearForm();
          this.fetchLeads();
          //this.attachments = [];
        );
       else 
        this.errors = null;

        const constraints = this.getConstraints();
        const errors = validate(this.$data.form, constraints);
        if (errors) 
          this.errors = errors;
          return;
        
        console.log("i am in edit");
        // multiple file uploading
        this.lead = document.getElementById("leadform");
        let formData = new FormData(this.lead);
        if (this.attachments.length > 0) 
          for (var i = 0; i < this.attachments.length; i++) 
            let attachment = this.attachments[i];
            formData.append("attachments[]", attachment);
          
        
        formData.append("_method", "put");
        formData.append("id", this.form.id);
        console.log(formData);
        var config = 
          headers:  "Content-Type": "application/x-www-form-urlencoded" ,
          onUploadProgress: function(progressEvent) 
            this.percentCompleted = Math.round(
              (progressEvent.loaded * 100) / progressEvent.total
            );
            this.$forceUpdate();
          .bind(this)
        ;
        //end
        console.log(formData);
        this.$store.dispatch("lead");
        //update
        addLeadsAPI(formData, "put", config).then(res => 
          swal("Good job!", "You clicked the button!", "success");
          this.clearForm();
          this.fetchLeads();
          //this.attachments = [];
        );
      
    ,

Bueno, tuve un problema al intentar actualizar registros usando axios & vue.js.

La solución es establecer el valor del método en el formData a puty enviar la solicitud mediante el post método. Algo como esto:

console.log("i am in edit");
    // multiple file uploading
    this.lead = document.getElementById("leadform");
    let formData = new FormData(this.lead);
    if (this.attachments.length > 0) 
      for (var i = 0; i < this.attachments.length; i++) 
        let attachment = this.attachments[i];
        formData.append("attachments[]", attachment);
      
    
    formData.append("_method", "put");
    console.log(formData);

Acuérdate de que te permitimos parafrasear tu experiencia .

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *