インデックスを使用して複数のファイルをアップロードする場合は、FineUploaderを使用してください

Question

multipleオプションを有効にすると、ファイルのインデックスをトラッキングする方法がわかりません。FineUploaderプラグインを使用しています。

イメージアップロードを処理する際にサーバー側で行っていることは、データベースから既存のイメージを照会し、カウントを取得し、インデックスが新しくアップロードされたイメージのリンクを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 
     } 
    }); 

Answer 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"; 
        }); 
       } 
      } 
     } 
});