如何在 Vuejs 中发送文件？

Posted 2023-02-22

【中文标题】如何在 Vuejs 中发送文件？

【英文标题】：How to send files in Vuejs?

【发布时间】：2017-07-29 07:01:11

【问题描述】：

我有两个脚本

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 中也不存在文件：

数组（0）↵↵

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

【问题讨论】：

我将文件从 vuejs 发送到 laravel ，希望它也适用于核心 php。 ***.com/questions/42579070/…

【参考方案1】：

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

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

然后像往常一样发送数据。希望它对将来的人有所帮助。

【参考方案2】：

我不知道如何在 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()。