Используйте FineUploader для загрузки нескольких файлов с индексом

Я использую подключаемый модуль FineUploader для функции загрузки изображений и не могу найти способ отслеживать индекс файл, когда опция multiple включена.

Что я делаю на стороне сервера при обработке загрузки изображения, так это то, что я запрашиваю существующие изображения из базы данных, получаю подсчет и сохраняю ссылку на недавно загруженное изображение с индексом, равным existing_count+1, в базу данных.

Это должно позволить мне иметь запись обо всех загруженных изображениях с порядком их загрузки в качестве индекса.

Однако с включенной опцией multiple, когда загрузчик обращается к конечной точке моего сервера для последующих файлов, запрос к базе данных, похоже, не обновляется с момента последнего сохранения изображения.

Это состояние гонки? Есть ли способ передать индекс файла на сервер?

Вот мой код:

серверная часть (Laravel)

public function save_listing_picture() {
     if (Input::hasFile('listing')) {
        $user = Auth::user();
        $id = $user->id;
        $existing_count = Image::where('user_id', $id)->count(); //this doesn't update on a multiple upload request

        $file = Input::file('listing');
        $imagePath = '/images/'+$id+'/image_'+$existing_count+1+'.jpg';
        $img = Image::make($file)->encode('jpg', 75);
        $img->save($imagePath);

        $imgRecord = new Image();
        $imgRecord->link = $imagePath;
        $imgRecord->save();
    }
}

интерфейс (JS):

var listingUploader = new qq.FineUploader({
        element: document.getElementById("image-uploader"),
        template: 'qq-template',
        debug: true,
        request: {
            endpoint: '/account/save-image',
            params: {'_token': csrf_token},
            inputName: 'listing'
        },
        thumbnails: {
            placeholders: {
                waitingPath: '/img/fine-uploader/waiting-generic.png',
                notAvailablePath: '/img/fine-uploader/not_available-generic.png'
            }
        },
        image: {
            minHeight: 300,
            minWidth: 300
        },
        validation: {
            allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
            itemLimit: 3
        }
    });

mysql javascript php laravel fine-uploader
person tropicalfish    schedule 27.10.2016    source источник
comment
Вместо использования индекса, который не уникален для наборов загрузки и пользователей, почему бы вместо этого не ссылаться на файлы по UUID, отправленному Fine Uploader вместе с запросом на загрузку?   -  person Ray Nicholus    schedule 27.10.2016
comment
@RayNicholus спасибо. Я использую последовательность, думая, что проще получить URL-адрес изображения во внешнем интерфейсе. Я предполагаю, что на данный момент UUID является лучшим подходом.   -  person tropicalfish    schedule 27.10.2016
comment
Каждый запрос на загрузку включает параметр qquuid с этим UUID. Вам нужна дополнительная помощь?   -  person Ray Nicholus    schedule 27.10.2016
comment
@RayNicholus есть ли способ получить qquuid при полном обратном вызове? просто пытаюсь обновить изображение в интерфейсе после завершения загрузки.   -  person tropicalfish    schedule 27.10.2016
comment
Учитывая идентификатор файла, который предоставляется вашему обработчику обратного вызова onComplete, вы можете получить UUID, используя getUuid(id).   -  person Ray Nicholus    schedule 27.10.2016
comment
@RayNicholus, спасибо, все работает. Пожалуйста, добавьте ответ :)   -  person tropicalfish    schedule 27.10.2016
comment
Я могу это сделать, или вы можете написать код, который решит конкретную проблему за вас, учитывая мой совет. Я был бы рад также проголосовать за ваш ответ.   -  person Ray Nicholus    schedule 27.10.2016

Ответы (1)


arrow_upward
1
arrow_downward

В итоге я использовал UUID для отслеживания каждого загруженного файла, чтобы избежать дублирования и ошибочного переопределения (спасибо @RayNicholus за предложение).

Вот мое решение:

серверная часть

public function save_listing_picture(Request $request) {
    if (Input::hasFile('listing')) {
        $user = Auth::user();
        $id = $user->id;

        $file = Input::file('listing');

        $fileId = $request->get('qquuid');
        $destination_path = 'images/' . $id . '/';
        if (!is_dir($destination_path)) {
            mkdir($destination_path, 0777, true);
        }
        $full_path = $destination_path . $fileId . ".jpg";
        $img = Image::make($file)->encode('jpg', 75);
        $img->save(public_path() . '/' . $full_path);

        $imgRecord = new Image();
        $imgRecord->link = $full_path;
        $imgRecord->save();


        return response()->json(['success' => true]);
    }

    return response()->json(['status' => 'Input not found']);
}

внешний интерфейс:

var userId = {{Auth::user()->id}}; //laravel blade
var listingUploader = new qq.FineUploader({
    element: document.getElementById("image-uploader"),
    template: 'qq-template',
    debug: true,
    request: {
        endpoint: '/account/save-image',
        params: {'_token': csrf_token},
        inputName: 'listing'
    },
    thumbnails: {
        placeholders: {
            waitingPath: '/img/fine-uploader/waiting-generic.png',
            notAvailablePath: '/img/fine-uploader/not_available-generic.png'
        }
    },
    image: {
        minHeight: 300,
        minWidth: 300
    },
    validation: {
        allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
        itemLimit: 3
    },
    callbacks: {
            onAllComplete: function(succeeded, failed) {
                if (succeeded.length > 0) {
                    succeeded.forEach(function(fileId, index) {
                    var imageId = "image" + index;
                    document.getElementById(imageId).src='images/' + userId + '/' + listingUploader.getUuid(fileId)+".jpg";
                    });
                }
            }
        }
});
person tropicalfish    schedule 27.10.2016