我想将神社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