2015-02-04 72 views
3

我用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_processingprofile_image_tmp领域,以及,当然,一个profile_image列。

回答

1

我已通过轮询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 $(@) 

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