使用 FineUploader 上传多个带索引的文件

Posted

技术标签:

【中文标题】使用 FineUploader 上传多个带索引的文件【英文标题】:Use FineUploader to upload multiple files with index 【发布时间】:2017-03-09 23:32:23 【问题描述】:

我正在为我的图片上传功能使用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
        
    );

【问题讨论】:

不使用索引,它在上传集和用户之间不是唯一的,为什么不使用Fine Uploader上传请求发送的UUID引用文件? @RayNicholus 谢谢。我使用序列认为在前端检索图像 URL 更容易。我想在这一点上,UUID 是一种更好的方法。 每个上传请求都包含一个带有此 UUID 的 qquuid 参数。您需要进一步的帮助吗? @RayNicholus 有没有办法在完整的回调中检索qquuid?只是在上传完成后尝试在前端刷新图像。 给定文件的 ID,它提供给您的 onComplete 回调处理程序,您可以使用 getUuid(id) 检索 UUID。 【参考方案1】:

我最终使用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";
                    );
                
            
        
);

【讨论】:

以上是关于使用 FineUploader 上传多个带索引的文件的主要内容,如果未能解决你的问题,请参考以下文章

使用聚合查找最新批次中的文件数

Fine Uploader 无法上传文件

在 [FINE UPLOADER] 中显示以前上传的图像

Fine Uploader文件上传组件

初步学习FineUploader(java)

带字幕的多个图像文件上传