Question

我有两个脚本

首先在Vue组件中：

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*
})

服务器上的php脚本：

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

dd（） - 只是一个函数来查看参数中的内容

1 * - 一切都很好，所有字符串和文件都存在：

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

2 * - 并非一切都好（接下来解释）
3 * - 只显示字符串，但文件消失了：

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

4 * - 在$ _FILES中也不存在文件：

array(0) {↵}↵

那么，我应该如何在vuejs中发送文件？

Answer 1

我不知道如何在VueJS中发送文件。我所知道的是，一年前我遇到了与angularjs类似的问题。我的解决方案是使用javascript FormObject（）将数据发送到服务器而不是仅使用Object（）。我还必须编写一个看起来像这样的自定义指令

<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();
            });
        }
    };
});

我知道这并没有直接回答你的问题，但希望它能为你提供一个起点。我首先尝试使用FormObject（）。

Answer 2

经过几个小时的测试，我找到了正确的方法来发布带字符串的文件：

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);

然后只需将数据发送给我们。希望将来有人帮助。

如何在Vuejs中发送文件？

2 个答案: