Как отправить файлы в Vuejs?

Question

Как отправить файлы в Vuejs?

У меня есть два сценария

первый в компоненте 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?

0

javascript php vue.js vuejs2

Решение

Другие решения

После нескольких часов тестов я нашел правильный способ размещения файлов со строками:

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

А затем просто отправьте данные как обычно. Надеюсь, это поможет кому-то в будущем.

0

Источник

Accepted Answer

Я понятия не имею, как отправлять файлы в 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 ().

0