如何在Vuejs中发送文件？

Question

I have two scripts

first in Vue component:

var data = {
    cover: myResult[0], // first file
    file: myResult[1], // second file
    title: self.title, // first string
    desc: self.desc // second string
};
self.$http.post('tracks.post', data)
    .then(res =>{
         console.log(data); // 1*
         console.log(res); //  2*
})

And php script on server:

dd(file_get_contents('php://input')); // 3*
dd($_FILES); // 4*

dd() - just a function to see what in parametr

1* - all is good, all strings and file exists:

Object {cover: File, file: File, title: "ada", desc: "asdasd"}

2* - not all is good (explanation next)
3* - there shows only strings, but files are disappeared:

string(52) "{"cover":{},"file":{},"title":"ada","desc":"asdasd"}"↵

4* - in $_FILES also not exists files:

array(0) {↵}↵

So, How I should to send files in vuejs?

Answer 1

I have no idea how to send files in VueJS. What I do know is that I ran into a similar issue with angularjs a year ago. My solution was to use javascript FormObject() for sending data to the server instead of just using Object(). I also had to write a custom directive which looked like this

<input data-file id="id_image" name="image" ng-model="museumMap" type="file">

myApp.directive('file', function() {
    return {
        require:"ngModel",
        restrict: 'A',
        link: function($scope, el, attrs, ngModel){
            el.bind('change', function(event){
                var files = event.target.files;
                var file = files[0];

                ngModel.$setViewValue(file);
                $scope.$apply();
            });
        }
    };
});

I know this doesnt directly answer your question, but hopefully it gives you a starting point. Id try using FormObject() first.

Answer 2

After few hours of tests, I founded right way to post files with strings:

let data = new FormData();
data.append('token', self.$auth.getToken());
data.append('file', file);
data.append('cover', cover);
data.append('title', self.title);
data.append('desc', self.desc);

And then just send the data as usuall. Hope it helps someone in future.