Отправка файла через axios в laravel
Я использую сборщик файлов Quasar для перехвата файла от пользователя для отправки в Laravel контроллер с помощью Axios. Когда я отправляю свои данные в Laravel контроллер, я получаю пустой объект. Пожалуйста, помогите мне решить эту проблему!
Html :
<q-file
v-model = "file"
accept = ".jpg, .png, .jpeg"
label = "Select file"
/>
Js :
let config;
export default {
data() {
return {
file: null
},
methods: {
send() {
let data = new FormData();
data.append('file', this.file);
Http.post('api/create', data, config)
.then(response => {
console.info(response )
})
.catch(error => {
console.info(error)
});
}
},
created() {
config = {
headers: {
'Content-Type': 'multipart/form-data'
}
};
}
результат console.info(this.file,config);:
File {name: "WhatsApp Image 2020-12-07 at 10.25.00 PM (2).jpeg", lastModified: 1607540162000, lastModifiedDate: Wed Dec 09 2020 22:26:02 GMT+0330 (Iran Standard Time), webkitRelativePath: "", size: 73419, …}
lastModified: 1607540162000
lastModifiedDate: Wed Dec 09 2020 22:26:02 GMT+0330 (Iran Standard Time) {}
name: "WhatsApp Image 2020-12-07 at 10.25.00 PM (2).jpeg"
size: 73419
type: "image/jpeg"
webkitRelativePath: ""
headers:
Content-Type: "multipart/form-data"
@anasomush В файле контроллера: {}
@anasomush В заголовке у меня есть: файл: (двоичный)
ваша проблема в контроллере, в интерфейсе все в порядке
Ответы 2
Ты очень близко. При работе с полями ввода файла вы не используете v-модель, поскольку файлы обрабатываются немного иначе, чем обычные данные.
Вместо этого прослушайте изменения на входе файла, а затем создайте составные данные формы и отправьте их в laravel.
Добавьте событие изменения к вашему вводу, которое запускает ваш метод отправки. Значение $event будет содержать все, что нам нужно. ($event — это специальная переменная для сбора данных о событиях из полей).
<q-file
accept = ".jpg, .png, .jpeg"
label = "Select file"
@change = "send($event)"
/>
Затем немного скорректируйте метод отправки
export default {
methods: {
send(event) {
// Don't go any further if no file was selected
if (!event.target.files.length) return
const data = new FormData();
data.append('file', event.target.files[0]);
Http.post('api/create', data, {
headers: {
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
console.info(response )
})
.catch(error => {
console.info(error)
});
}
}
}
Ваш загруженный файл будет доступен в Laravel через $request->file('file');
Спасибо за ваш ответ, у меня есть другие входы и кнопка, которая отправляет форму в бэкэнд. Как я могу использовать его в своем коде?
Когда я пытаюсь бежать: console.info(event.target.files[0]) У меня ничего нет :/
Вы можете добавить другие данные, добавив дополнительные добавления. например: data.append('somethingelse', this.somethingElse);
Дело было в контроллере laravel, который не показывал мне полученные файлы в return $request->all(), return $request()->files() или return $request->input('file).
Я не знаю, это было о api или laravel passport, но я сохраняю элемент в каталоге проекта и готово!
все в порядке, пожалуйста, в дампе вашего контроллера (request () -> all ()); и скинь скрин если можно