在表单提交后显示上传到 S3 的图像 Carrierwave/Sidekiq

Question

我将 Sidekiq 与 CarrierWave 和 CarrierWaveBackgrounder 结合使用，在后台将我的图像上传到 S3。这工作正常，除了一件事：在我提交我的表单后，图像在 Sidekiq 中排队并处理，但页面重新加载发生的速度比后台作业快，导致上传的图像出现 404。再次刷新页面后，通常会显示图像。

我想知道是否有办法显示 tmp 文件（我的数据库中有一个 image_tmp 列，它似乎存储了文件的路径，而它是 processing/uploading），或在处理完成后重新加载我的图像。

我可以轮询我的数据库以将 'image_processing' 更改为 true，但这似乎有点浪费请求。

我的用户的相关部分class：

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 列。

Answer 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"

然后我使用以下 CoffeeScript class 连接到 data-poll 属性：

$ ->

  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 $(@)

似乎很适合我的目的。

在表单提交后显示上传到 S3 的图像 Carrierwave/Sidekiq

Display image uploaded to S3 with Carrierwave/Sidekiq after form submit

ruby-on-rails

amazon-s3

carrierwave

sidekiq