Laravel/Vue.js 프로젝트에서 Vuesax 업로드 구성 요소를 사용하는 방법

Laravel/Vue.js 프로젝트에서 Vuesax 업로드 구성 요소를 사용하는 방법

나는 웹과 유투브에 관한 튜토리얼을 가지고 이 프로젝트 베이스를 작업하고 있다. 내 문제는 튜토리얼을 기반으로 한 그 베이스가 이것과 같은 것을 가지고 있다.

<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.preventSubmit(제출) 버튼을 눌러 이미지를 호스트로 업로드하십시오.

문제는 이 사이트의 구성 요소를 사용하고 있다는 것이다.

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구성 요소

나는 그 컴포넌트가 파일을 할당하기 위한 바인딩이나 폼 오브젝트를 지원하지 않는다고 생각한다.그러나 Laravel의 백엔드에서는 $_FILES로 파일을 얻을 수 있으며, 이것은 당신이 그것을 사용하고 단지 서버에 파일을 저장할 수 있는 파일의 객체를 제공할 것이다.

여기 이 업로드 시스템에 대한 내 작업이 여기에 있다.

라라벨 함수

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

그리고 VUE 코드에 대해 자세히 알아보려면 https://lusaxweb.github.io/vuesax/components/upload.html#automatic

<vs-upload multiple fileName='archive[]' automatic action="/api/archive" @on-success="successUpload" />

그리고 $_FILES 데이터는 아래 입니다.

참조URL: https://stackoverflow.com/questions/54164838/how-use-vuesax-upload-component-in-laravel-vue-js-project