How to send an file with $http.post in Vue.Js

Question

How can I send a file with vue.js?

The following code is not working for me:

<span title="Upload" class="badge badge-info">
            <input type="file" id="file" name="file" @change="uploadData" class="archive" > <i id="iarchive" class="fa fa-upload"></i> 
</span>

When I make console.log(this.request.file) I get FILE [object File].

Here is the .js:

  uploadData: function(e) {
                var files = e.target.files[0];


                this.request.action = 'upload';
                this.request.file = files;
                console.log("FILE "+this.request.file);

                this.$http.post('data/getData.php', {
                data: this.request,    
                headers: {
                           'Content-Type': 'multipart/form-data'                   
                }
              }
               ).then(function(response) {

                    console.log("RESPONSE: "+response.body);

            }, function(response) {

                alert("error");
            });
            return false;
        }

But in PHP, I can't get the file, the response is :{} No properties.

PHP code:

$request = json_decode(file_get_contents('php://input')); 
$req = $request->data;
echo json_encode($req->file)

Nikita · Accepted Answer · 2018-01-29 14:16:13Z

7

Add ref attribute to input:

<input ref="file-input" .../>

In controller you should write action:

uploadFile: function () {
  // try to log $refs object for deep understanding
  let fileToUpload = this.$refs.fileInput.files[0];
  let formData = new FormData();

  formData.append('fileToUpload', fileToUpload);
  this.$http.post ( 'data/getData.php', formData ).then(function () {
    // success actions
  });
}

In php endpoint your uploaded files will be in form request object.

edited Jan 29, 2018 at 14:16

answered Jan 29, 2018 at 13:32

Nikita

4083 silver badges9 bronze badges

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

2 Comments

Andress Blend Over a year ago

thank for you response, but, now i get :null from php in $request = json_decode(file_get_contents('php://input')); var_dump($request); | imgur.com/Dw0XwpU, how recive this file in php?

Nikita Over a year ago

Try to dump $_FILES, official doc

vpalade · Accepted Answer · 2018-01-29 13:37:15Z

0

Use FormData append() function:

var files = e.target.files[0];

var formData = new FormData();
formData.append('file', files);

this.$http.post('/data/getData.php', formData, {
   headers: {
        'Content-Type': 'multipart/form-data'
   }
})

answered Jan 29, 2018 at 13:37

vpalade

1,4372 gold badges16 silver badges20 bronze badges

2 Comments

Andress Blend Over a year ago

thank for you response, but, now i get :null from php in $request = json_decode(file_get_contents('php://input')); var_dump($request); | imgur.com/Dw0XwpU

vpalade Over a year ago

use $_FILES. I see you solved the problem, good luck.

Collectives™ on Stack Overflow

How to send an file with $http.post in Vue.Js

2 Answers 2

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related