Question

我当前正在使用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在UploaderFile组件上具有isComplete {Boolean}作用域的插槽，该插槽显然返回服务器响应。但是我不确定该如何使用？我已经找到了原始代码here，但实际上如何检查服务器响应以查看结果？

如您所见，我尝试创建一个isComplete方法，但是目前不执行任何操作。

任何建议表示赞赏

Answer 1

请尝试使用fileSuccess方法而不是使用isComplete，该方法的第三个参数来自服务器。

取自docs：

.fileSuccess(rootFile, file, message, chunk)：一个特定的文件是完成。第一个参数rootFile是根Uploader.File实例包含或等于完成的文件，第二个参数文件参数也是Uploader.File的实例，它是当前完成的文件对象，第三个自变量消息包含服务器响应。响应始终是字符串。第四个参数块是的实例 Uploader.Chunk。您可以通过访问xhr对象获取响应状态 chunk.xhr.status。

我曾经遇到过类似情况，但是使用了不同的库，所以我不确定这是否行得通。

在VueJS中使用第三方组件

1 个答案: