Работа со сторонними компонентами в VueJS - PullRequest
Новая
       8

Работа со сторонними компонентами в VueJS

0 голосов
/ 06 января 2019

В настоящее время я использую vue-simple-uploader . Пока все было довольно просто, у меня настроен компонент 

<uploader :options="options" ref="uploader" id="churn" @file-complete="fileComplete" @complete="complete">
    <uploader-unsupport></uploader-unsupport>
    <uploader-drop>
        <p>Please upload 1 file</p>
        <uploader-btn :attrs="attrs" :single=true>select files</uploader-btn>
    </uploader-drop>
    <uploader-list></uploader-list>
</uploader>

И у меня есть сценарий 

<script>
    import uploader from 'vue-simple-uploader'

    export default {
        data() {
            return {
                reportType: '',
                options: {
                    target: 'api/upload',
                    testChunks: false,
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    }
                },
                attrs: {
                    accept: '.csv'
                }
            }
        },
        methods: {
            complete () {
                console.log('complete', arguments)
            },
            fileComplete () {
                console.log('file complete', arguments)
            },
            isComplete () {
                console.log(arguments)
            }
        }
    }
</script>

Так что по большей части это работает. Файл отправляется частями на мой маршрут API и сохраняется. Мой API отправляет ответ 

return response()->json([
    'path' => $filePath,
    'name' => $fileName,
    'mime_type' => $mime
]);

И теперь я хочу проверить это на веб-интерфейсе. vue-simple-uploader имеет слот области isComplete {Boolean} в компоненте UploaderFile, который, очевидно, возвращает ответ сервера. Я не уверен, однако, как я могу использовать это? Я нашел оригинальный код здесь но как мне на самом деле проверить ответ сервера, чтобы увидеть результат?

Как видите, я пытался создать метод isComplete, но в настоящее время он ничего не делает.

Любой совет приветствуется

1 Ответ

0 голосов
/ 06 января 2019

Вместо использования isComplete попробуйте использовать метод fileSuccess, третий аргумент которого поступает с сервера.

Взято из документов :

.fileSuccess(rootFile, file, message, chunk): Конкретный файл был завершено. Первый аргумент rootFile - это корневой экземпляр Uploader.File. который содержит или равен заполненному файлу, второму аргументному файлу Аргумент также является экземпляром Uploader.File, это текущий завершенный объект файла, сообщение третьего аргумента содержит ответ сервера. отклик всегда является строкой. Четвертый аргумент чанк является экземпляром Uploader.Chunk. Вы можете получить статус ответа, открыв объект xhr. chunk.xhr.status.

У меня был опыт в похожей ситуации, но с другой библиотекой, поэтому я не уверен, сработает ли это.

...