Question

在我的网站上，您可以上传带有属性和图像的狗 Vuejs是前端，Laravel是后端。

我在我的项目中使用此vue-dropzone component来上传图像。

<小时/> 问题
我想同时上传狗的图像和属性（当用户点击提交按钮时），以便图像文件可以链接到数据库中狗的id。

Laravel注册新狗的功能（ route：'api / dogs'）

public function store(Request $request)
{
    $attributes = [
        'name' => $request->input('name'),
        'type' => $request->input('dogType'),
        ...
    ];

    $dogId = Dog::insertGetId($attributes);

    // Upload files
    if ($request->hasFile('files')) {
        // getting all files
        $files = $request->file('files');
        // Count files to be uploaded
        $file_count = count($files);
        // start count how many uploaded
        $uploadcount = 0;
        if($uploadcount == $file_count) {
            return true;
        } else {
            FileController::store($request, 0, 0, $dogId, $files, $uploadcount);
        }
    }
    return $dogId;
}

Dropzone组件（ Formdropzone ）

<template>
    <div>
        <dropzone 
            :id="this.id" 
            :url="this.url"
            :accepted-file-types='"image/*"'
            :use-font-awesome="true"
            :preview-template="template"
            :auto-process-queue="false" <----
            :upload-multiple="true"
            :parallel-uploads=100
            :max-files=100
            @vdropzone-success="showSuccess"
            >
        </dropzone>
    </div>
</template>

<script>
    import Dropzone from 'vue2-dropzone'

    export default {
        props: {
            id: {
                type: String,
                required: true
            },
            url: {
                type: String,
                required: true
            }
        },
        components: {
            Dropzone
        },
        methods: {
            showSuccess(file) {
                console.log('A file was successfully uploaded')
            },
            template() {

            return `
                <div class="dz-preview dz-file-preview">
                    <div class="dz-image" style="width: 200px;height: 200px">
                    <img data-dz-thumbnail /></div>
                    <div class="dz-details">
                        <div class="dz-size"><span data-dz-size></span></div>
                        <div class="dz-filename"><span data-dz-name></span></div>
                    </div>

                    <div class="dz-progress"><span class="dz-upload" data-dz-uploadprogress></span></div>
                    <div class="dz-error-message"><span data-dz-errormessage></span></div>
                    <div class="dz-success-mark"><i class="fa fa-check"></i></div>
                    <div class="dz-error-mark"><i class="fa fa-close"></i></div>
                </div>
                `;
            }
        }
    }
</script>

注册狗组件

<tab-content title="Images">
    <div class="form__input__wrapper">
        <span class="label">Images (optional)</span>
            <formdropzone url="http://domain.local/api/dogs" ref="dogDropzone" id="dogDropzone"></formdropzone>
    </div>
</tab-content>
<script>
    import Formdropzone from './Formdropzone'

    export default {
        data() {
            return {    
                dog:{
                    name: '',
                    dogType: '',
                    ...
                }
            }
        },
        methods: {
            publish() {
                this.$http.post('api/dogs', this.dog)
                   .then(response => {
                        this.$refs.dogDropzone.processQueue() <----   
                        this.$router.push('/feed')
                    })
            }
        },
        components: {
            'formdropzone': Formdropzone
        }
</script>

<小时/> 错误消息

Uncaught（承诺）TypeError：无法读取未定义的属性'processQueue'

我会非常感谢任何帮助！

Vue-Dropzone processQueue无效

0 个答案: