FilePond 向服务器发送空白请求

Question

我使用Laravel-filepond 和Vue FilePond。
但 FilePond 向服务器发送一个空白请求。
这是我的代码： *UserComponent.vue

<template>
    <div class="container">
    <file-pond
            name="Profile"
            ref="pond"
            label-idle="drag & drop"
            v-bind:allow-multiple="false"
            accepted-file-types="image/jpeg, image/png"
            v-bind:files="userFile"
            v-bind:server="{
url: '/panel/filepond',
timeout: 7000,
process: {
url: '/process',
method: 'POST',
headers: {
'X-CSRF-TOKEN': this.get_meta('csrf-token'),
},

}
}"
            v-on:init="handleFilePondInit"/>
    </div>
</template>

<script>
    import vueFilePond, {setOptions} from 'vue-filepond';
    import 'filepond/dist/filepond.min.css';
    import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
    import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
    import FilePondPluginImagePreview from 'filepond-plugin-image-preview';

    import FilePondPluginImageEdit from 'filepond-plugin-image-edit';
    const FilePond = vueFilePond(FilePondPluginFileValidateType, FilePondPluginImagePreview);
    export default {
        data() {
            return {
                userFile: [],
            }
        },
        methods: {
            handleFilePondInit: function () {
                console.log('FilePond has initialized');
            }
        },
        components: {
            FilePond
        },
    }
</script>

FilePondController.php Original file

<?php

namespace Sopamo\LaravelFilepond\Http\Controllers;

use function dd;
use Illuminate\Http\Request;
use Illuminate\Routing\Controller as BaseController;
use Sopamo\LaravelFilepond\Filepond;

class FilepondController extends BaseController
{
    private $filepond;

    public function __construct(Filepond $filepond)
    {
        $this->filepond = $filepond;
    }
    public function upload(Request $request)
    {
        dd($request->all());
    }
}

当我在客户端上传文件时（默认响应为 422），我在服务器上找不到它。
FrameWorks & Repository 是最新版本。

回应 []

Answer 1

根据author，您发送的是元数据而不是文件本身。我使用您可以在documentation 中找到的高级自定义处理功能解决了这个问题。在那里你可以找到关于代码的每个部分几乎做什么的 cmets。

data() {
    return {
        server: {
            url: 'http://base-url.test',
            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {

                const formData = new FormData();

                formData.append(fieldName, file, file.name);

                const request = new XMLHttpRequest();

                request.open('POST', 'url-to-post-to');

                request.setRequestHeader('X-CSRF-TOKEN', 'your-csrf-token');

                request.upload.onprogress = (e) => {
                    progress(e.lengthComputable, e.loaded, e.total);
                };

                request.onload = function () {
                    if (request.status >= 200 && request.status < 300) {
                        load(request.responseText);
                    } else {
                        error('Error');
                    }
                };

                request.send(formData);

                return {
                    abort: () => {
                        request.abort();

                        abort();
                    },
                };
            },
        },
    }
},

那么你只需要绑定它：

<template>
    <div class="container">
        <file-pond
            name="Profile"
            ref="pond"
            label-idle="drag & drop"
            v-bind:allow-multiple="false"
            accepted-file-types="image/jpeg, image/png"
            v-bind:files="userFile"
            v-bind:server="server"
            v-on:init="handleFilePondInit" />
    </div>
</template>

responseText 是来自服务器的唯一 ID。也许您想将其发送到父组件：

data() {
    return {
        server: {
            url: 'http://base-url.test',
            process: (fieldName, file, metadata, load, error, progress, abort, transfer, options) => {

                const thisReference = this;

                // Other code

                request.onload = function () {
                    if (request.status >= 200 && request.status < 300) {
                    thisReference.
                        thisReference.$emit('my-event', request.responseText);
                        load(request.responseText);
                    } else {
                        error('Error');
                    }
                };

                // Other code
            },
        },
    }
},

如果您想知道哪个文件已被还原，则非常相似（在这种情况下，您需要使用您发送的相同 id 从服务器响应）：

data() {
    return {
        server: {
            // Process, url, etc.
            revert: {
                url: '/url-to-delete',
                method: 'DELETE',
                headers: {
                    'X-CSRF-TOKEN': 'your-csrf-token'
                },
                onload: (idDeleted) => this.$emit('my-event', idDeleted)
            },
        },
    }
},