1

我想将神社gem与cropper js一起使用,我阅读了神社图像裁剪并参考了示例代码,首先,我复制了示例代码,但我碰巧

ActionController::RoutingError (No route matches [GET] "/uploads/cache/47eee6dc368f20db1e26fa5176552136.jpg"):

我认为这个错误我无法发送正确的路径,我没有解决这个错误,

有人帮助我,好吗?

application.js 的一部分:

var uppy = Uppy.Core({
   autoProceed: true,
   restrictions: {
     allowedFileTypes: fileInput.accept.split(','),
   }
  })
  .use(Uppy.FileInput, {
   target: formGroup,
   locale: { strings: { chooseFiles: 'Choose file' } },
   })
 .use(Uppy.Informer, {
   target: formGroup,
   })
  .use(Uppy.ProgressBar, {
   target: imagePreview.parentNode,
   })
  .use(Uppy.ThumbnailGenerator, {
    thumbnailWidth: 600,
   })
  .use(Uppy.XHRUpload, {
    endpoint: '/app/assets/images/uploads',
   })

  uppy.on('upload-success', (file, response) => {

  var uploadedFileData = JSON.stringify(response.body['data'])
  // set hidden field value to the uploaded file data so that it's submitted with the form as the attachment
console.log(response.uploadURL)

cropbox(imagePreview, response.uploadURL, {
  onCrop(detail) {
    let fileData = JSON.parse(uploadedFileData)
    fileData['metadata']['crop'] = detail
    hiddenInput.value = JSON.stringify(fileData)
  }
})
})

uppy.on('thumbnail:generated', (file, preview) => {
  imagePreview.src = preview
})
}

form.html.erb:

 <div class="form-group">
  <%= f.fields_for :photos, @blog_form.get_photos do | photos_fields| %>

    <%= photos_fields.label :image %>

    <%= photos_fields.hidden_field :image, value: photos_fields.object.cached_image_data, class: "upload-data" %>

    <%= photos_fields.file_field :image, accept: ImageUploader::ALLOWED_TYPES.join(","),
  data: {
    upload_server: "upload_server",
    preview_element: "preview-photo",
    upload_result_element: "preview-photo-upload-result",
  }%>

    <div class="image-preview">
   <!-- static link to the thumbnail generated on attachment -->
   <%= image_tag photos_fields.object.image_url(:medium),
    width: 300,
    class: "img-thumbnail file-upload-preview",
    id: "preview-photo" %>
 </div>


   <% end %>

路线.rb:

 Rails.application.routes.draw do

 mount ImageUploader.derivation_endpoint => "/derivations/image"
 mount ImageUploader.upload_endpoint(:cache) => "/app/assets/images/uploads"
 get "/derivations/image/*rest" => "derivations#image"


 get 'sessions/new'

 devise_for :users

 resources :users do

  resources :blogs

 end
 # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end

Shrine.rb 插件:

require "shrine"
require "shrine/storage/file_system"




Shrine.storages = {
 cache: Shrine::Storage::FileSystem.new("app/assets/images", prefix: "uploads/cache"), # temporary
 store: Shrine::Storage::FileSystem.new("app/assets/images", prefix: "uploads"),       # permanent
}


Shrine.plugin :pretty_location
Shrine.plugin :determine_mime_type, analyzer: :marcel


Shrine.plugin :activerecord           # loads Active Record integration
Shrine.plugin :cached_attachment_data # for retaining the cached file across form redisplays
Shrine.plugin :restore_cached_data # re-extract metadata when attaching a cached file

Shrine.plugin :validation_helpers


Shrine.plugin :derivatives
Shrine.plugin :derivation_endpoint, secret_key: "secret", expires_in: 10

Shrine.plugin :upload_endpoint, url: true
Shrine.plugin :default_url


 Shrine.plugin :backgrounding

Image_uploader.rb 的插件:

plugin :derivatives
plugin :upload_endpoint
plugin :derivation_endpoint, prefix: "/app/assets/images/uploads"

我用 console.log 检查了路径,所以 response.uploadURL 是

/uploads/cache/5a01d66280a502d7256acffeb1b21bca.jpeg
4

0 回答 0