Vue-Resource upload file to PHP

Question

I am trying to send an image through a resource and recovery in a php file but I have not succeeded, this is my JS file:

//* AJAX *//
startAsyncNews: function(){
    if(this.sendimage){
        var formdata = new FormData();
        formdata.append("file",this.contentnew.imageFile );
        console.log(this.contentnew.imageFile);
    }   

    // POST /someUrl
    this.$http.post('controllers/newsController.php', { 
        data:{action : this.accion_new, data_new: this.contentnew , imgf : formdata}
    }).then(response => {
    }, response => {
        console.log("error");
    });
},
imageSelect: function($event){
    this.sendimage=true;
    this.contentnew.imageFile =$event.target.files[0];  
}

When I use the console.log = console.log (this.contentnew.imageFile), it shows me the properties of the image correctly, that is, it is sending the file well, but when I receive it in php and I do vardump I get this object ( stdclass) # 3 (0) no properties no properties and with json_decode / encode I get it empty, also try

headers: {
    'content-type': 'multipart/form-data'
}

But it generates the following error:

Missing boundary in multipart/form-data POST

khofaai · Accepted Answer · 2018-08-14 00:45:57Z

2

You need to add all your data in formdata Object using formdata.append(key,value) function.
Then you simply send formdata

formdata.append('action ',this.accion_new);
formdata.append('data_new',this.contentnew);

this.$http.post('controllers/newsController.php', { 
    data:formdata
});
// or just if i'm not mistaken
this.$http.post('controllers/newsController.php',formdata);

object in http request data.

answered Aug 14, 2018 at 0:45

khofaai

1,3571 gold badge11 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Andress Blend Over a year ago

in php var_dump get this array(0) { } object(stdClass)#1 (1) { ["data"]=> object(stdClass)#2 (0) { } } object(stdClass)#2 (0) { }

khofaai Over a year ago

Can you try the second example ? and try to dump $_FILES.

Andress Blend Over a year ago

return this :( ... array(0) {} No properties

khofaai Over a year ago

can you try the same thing but without any change in headers object ?

Andress Blend Over a year ago

I'm not including the headers object :(

|

José A. Zapata · Accepted Answer · 2018-08-13 22:59:00Z

0

I don't know what this.accion_new and this.contentnew are, but this line:

this.$http.post('controllers/newsController.php', { 
    data:{action : this.accion_new, data_new: this.contentnew , imgf : formdata}
})

should simply be be:

  this.$http.post('controllers/newsController.php', formdata)

answered Aug 13, 2018 at 22:59

José A. Zapata

1,3071 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

Vue-Resource upload file to PHP

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related