Как использовать компонент загрузки Vuesax в проекте Laravel / Vue.js?
Я работаю над этим проектом на основе руководств по сети и YOUTUBE. Моя проблема в том, что на основе учебника я получил вот такое:
<form class = "form-horizontal">
<div class = "form-group">
<label for = "mellicode_front_url" class = "col-sm-2 control-label">scan</label>
<div class = "col-sm-12">
<input type = "file" @change = "updateMelliCodeFrontScan" name = "mellicode_front_url" class = "form-input" >
</div>
</div>
<div class = "form-group">
<div class = "col-sm-offset-2 col-sm-12">
<button @click.prevent = "saveMelliCodeFrontScan" type = "submit" class = "btn btn-success">submit scan</button>
</div>
</div>
</form>
как вы можете видеть в этом коде, когда я открывал файл IMAGE, я использую метод @change, затем я использую click.prevent в кнопке отправки, чтобы загрузить изображение на хост.
проблема в том, что я использую компонент с этого сайта:
https://lusaxweb.github.io/vuesax/components/upload.html
который использует этот тип кода для загрузки:
<vs-upload action = "https://jsonplaceholder.typicode.com/posts/" @on-success = "successUpload" />
Я изменил и удалил действие с onChange и другими вещами, но только потому, что я новичок, я уверен, что не сделал этого должным образом. Итак, я пытаюсь внедрить эти @change = "updateShenasnameScan" и @click.prevent = "saveShenasnameScan" в этот компонент vs-upload.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Я думаю, что этот компонент не поддерживает привязку или объект формы для назначения ему файлов. Но в бэкэнде в Laravel вы можете получать файлы с помощью $ _FILES, это даст вам объект файлов, который вы можете использовать и хранить файлы просто на сервере.
Вот моя работа над этой системой загрузки
Laravel Function
public function store(Request $request)
{
$stored = [];
$files = $_FILES;
foreach ($files['archive']['tmp_name'] as $key => $value) {
$file = file_get_contents($value);
if (Storage::disk('local')->put('archive/'. $files['archive']['name'][$key], $file)){
$stored[$key] = 'archive/'. $files['archive']['name'][$key];
}else{
$stored[$key] = $files['archive']['error'][$key];
}
}
return $stored;
}
And the VUE code, that you can find more about it here https://lusaxweb.github.io/vuesax/components/upload.html#automatic
<vs-upload multiple fileName='archive[]' automatic action = "/api/archive" @on-success = "successUpload" />
And the $_FILES data as bellow
поздно, но может кому-то помочь :)