在Laravel 5.7中使用Dropzone JS

时间:2018-10-17 12:55:20

标签: javascript php laravel dropzone.js

在Laravel应用程序中,我有一个文件上传器,它使用带有数组作为名称的文件输入。

就像这样:<input type="file" name="files[]" multiple required />

这允许我接受多个文件作为数组。

上传方法如下:

 /**
     * Process uploading of multiple files, ensuring that the extension is within the given white list
     *
     * @param Request $request
     * @return void
     */
    public function bulkUpload(Request $request)
    {
        // Get every extension that we allowed
        $all_ext = implode(',', $this->allExtensions());

        $this->validate($request, [
            'files.*' => 'required|file|mimes:' . $all_ext . '|max:50000'
        ], 
        [
            'files.*.required' => 'Please select a file to upload',
            'files.*.file' => 'You may only upload files in this area',
            'files.*.mimes' => 'This type of file is not permitted on the Intranet'
        ]);

        // Initialize a file upload counter
        $fileCount = 0;

        // Get the category and department from the form
        $category = $request->get('category');

        // Check that the category is of a type we've set
        if (!in_array($category, $this->categories)) {
            return redirect()->back()->with([
                'error' => "The category you've selected is not valid"
            ]);
        }

        // Ensure that the request contains files
        if ($request->hasfile('files')) {
            // Loop through each file and add it to storage
            foreach ($request->file('files') as $file) {

                // Get the meta data for each file
                $name = $file->getClientOriginalName();
                $extension = strtolower($file->getClientOriginalExtension());
                $type = $this->getType($extension);
                $size = $file->getSize();

                // Upload all the given files to Storage, within a specific directory
                if ($category != '') {
                    $path = $file->storeAs('library/' . $category, $name);
                    $department = null;
                }

                // Grab the filepath so we can store it in the database
                $file->filepath = $path;

                // Create the database entries for the newly uploaded files
                FileMetaData::firstOrCreate(
                    [
                        'name' => $name,
                        'extension' => $extension
                    ],
                    [
                        'category' => $category,
                        'type' => $type,
                        'size' => $size,
                        'filepath' => $path
                    ]);

                $fileCount++;

                Log::info(auth()->user()->log_reference . "uploaded files into the template library: {$name}");
            }

            return redirect('editable/templates-and-tools')->with('success', $fileCount . ' files have been added');
        }
    }

我试图在我的项目中实现Dropzone.js,因为使用文件输入对用户来说很痛苦。

为实现这一点,我添加了所有必需的依赖项,并为Dropzone添加了一个要初始化的元素。在我的刀片中,我添加了:

<div id="file" name="files[]" class="dropzone"></div>

然后,在我的脚本中,我像这样初始化Dropzone

<script>
    Dropzone.autoDiscover = false;

    var drop = new Dropzone('#file', {
        createImageThumbnails: false,
        maxFilesize: 50, // MB
        maxFiles: 2, 
        addRemoveLinks: true,
        url: "{{ route('uploads.upload') }}",
        headers: {
        'X-CSRF-TOKEN': document.head.querySelector('meta[name="csrf-token"]').content
        }
    });
</script>

我还更改了上传脚本,以在$file foreach循环结束后返回以下内容。

return response()->json(
    'success', 200
);

但是我在控制台中什么也没得到,文件也没有上传。

我希望验证程序返回JSON错误,但没有。

0 个答案:

没有答案