顯示圖像上傳到S3與Carrierwave/Sidekiq提交表格後

我用CarrierWave和CarrierWaveBackgrounder Sidekiq上傳我的圖像到S3在後臺。除了一件事情之外，此工作正常：在我提交表單後，圖像在Sidekiq中排隊並處理，但頁面重新加載比後臺作業更快，導致上傳的圖像上出現404錯誤。在另一頁面刷新後，圖像通常顯示出來。顯示圖像上傳到S3與Carrierwave/Sidekiq提交表格後

我想知道是否有辦法顯示一個tmp文件（我的數據庫中有一個image_tmp列，似乎在處理/上傳時存儲文件路徑），或者在處理後重新加載我的映像已經完成了。

我可以輪詢我的數據庫'image_processing'變成true，但這似乎有點像浪費了請求。

我的User類的相關部分：

mount_uploader :profile_image, ProfileImageUploader 

process_in_background :profile_image 
store_in_background :profile_image

ProfileImageUploader包括新聞背景

class ProfileImageUploader < CarrierWave::Uploader::Base 

    include ::CarrierWave::Backgrounder::Delay 
    include CarrierWave::MiniMagick

我的數據庫有profile_image_processing和profile_image_tmp領域，以及，當然，一個profile_image列。

來源

2015-02-04 cabaret

我已通過輪詢image_processing屬性解決了此問題。我的圖片上傳部分看起來像這樣：

.form-group{ :class => (f.error field) ? "has-feedback has-error" : nil } 
    = f.label field, :class => "col-md-3 control-label" 

    .col-md-9 
    = f.label field do 
     = image_tag('ajax-loader.gif', class: 'image-loader hidden') 
     - unless resource.image.blank? 
     %p= image_tag(resource.image.thumb.url, data: { poll: resource.image_processing }) 
     - else 
     %p No image uploaded yet. 

     = f.input_field field, :as => :file 
    %span.help-inline 
     = f.error field, :class => "help-inline"

我再勾入data-poll屬性有以下CoffeeScript的類：

$ -> 

    class ImagePoller 

    constructor: (@$el) -> 
     @$loader  = @$el.prev('.image-loader') 
     @timer  = null 
     @processing = JSON.parse @$el.attr('data-poll') 

     @resourcePath = "#{window.location.href}.json" 

     @startPolling() if @processing 

    startPolling: => 
     if @processing 
     @toggleLoader() 
     @$el.hide() 
     @timer = setInterval => 
      promise = $.getJSON @resourcePath 
      promise.done (data) => 
      @processing = data.image_processing 
      @fetchImage(data.image.thumb.url) if not @processing 
     , 100 

    fetchImage: (image) -> 
     clearInterval @timer 
     @toggleLoader() 
     @$el.attr 'src', image 
     @$el.show() 

    toggleLoader: -> 
     @$loader.toggle() 

    $('[data-poll]').each -> 
    new ImagePoller $(@)

似乎爲我的目的很好地工作。

來源

2015-02-06 07:41:50 cabaret

顯示圖像上傳到S3與Carrierwave/Sidekiq提交表格後

回答

相關問題