Ошибка загрузки файла Laravel SparkForm

Question

Ошибка загрузки файла Laravel SparkForm

Я работаю над проектом Laravel Spark и пытаюсь получить форму для загрузки папки в мое хранилище S3. Я построил форму:

<form enctype="multipart/form-data">
<input type="file" name="resume" v-model="form.resume">
<button @click="updateProfile">Update Profile</button>
</form>

Затем у меня есть компонент Vue, настроенный для обработки отправки формы:

Vue.component('resume-links', {
template: '#edit-resume-links',
data() {
return {
form: new SparkForm({
resume: ''
})
};
},
methods: {
updateProfile() {
console.log(this.form.resume);
Spark.post('/route/to/controller', this.form).then(response => {
console.log(response);
});
}
}
});

Тогда в моем контроллере Laravel:

$resume = $request->file('resume');

$resumeFileName = time() . '.' . $resume->getClientOriginalExtension();

$s3 = \Storage::disk('s3');
$filePath = '/resumes/' . $resumeFileName;
$s3->put($filePath, file_get_contents($resume), 'public');

Когда я пытаюсь отправить форму с файлом, он выдает эту ошибку:
Call to a member function getClientOriginalExtension() on null
я пытался var_dumpИНГ $resume сразу после установки на file() и то, что я вижу, выводится на консоль, это куча js смотреть код
Из всего, что я прочитал, похоже, что загрузка файлов с помощью Laravel очень проста, и я не знаю, почему у меня возникла эта проблема. Любая помощь / совет будет оценен! Спасибо!

1

forms laravel laravel-spark php vue.js

Решение

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

Других решений пока нет …

Источник

Accepted Answer

Прежде всего, ваш файл должен иметь v-el атрибут, а не v-model,

В вашем случае это будет <input type="file" name="form" v-el:resume />,

Затем в вашем компоненте Vue вам нужно собрать данные FormData, чтобы можно было отправить файл на сервер. Файлы должны обрабатываться немного иначе, чем текстовые поля и тому подобное.

Добавьте это к вашему methods объект:

gatherFormData() {
const data = new FormData();

data.append('resume', this.$els.resume.files[0]);

return data;
}

В вашем updateProfile Теперь вам нужно отправить эти данные на сервер в виде запроса POST.

updateProfile(e) {
e.preventDefault();

var self = this;

this.form.startProcessing();

$.ajax({
url: '/route/to/controller',
data: this.gatherFormData(),
cache: false,
contentType: false,
processData: false,
type: 'POST',
headers: {
'X-XSRF-TOKEN': Cookies.get('XSRF-TOKEN')
},
success: function (response) {
self.form.finishProcessing();

console.log(response)
},
error: function (error) {
self.form.setErrors(error.responseJSON);
}
});
},

Наконец, в вашем методе контроллера, теперь вы можете обрабатывать файл как обычно

(например., $request->file('resume');)

Обработка файлов с помощью Laravel на самом деле очень проста — вам просто нужно убедиться, что вы действительно получаете их на сервер;)

2