javascript - 尝试使用 aws rails 5.2 的 shrine direct_upload 实现拖放直接上传时出现问题

Question

代码:

image_upload.js

function uploadAttachment(attachment) {
  var file = attachment.file;
  var form = new FormData;
  form.append("Content-Type", file.type);
  form.append("forum_post_photo[image]", file);

  var xhr = new XMLHttpRequest;
  xhr.open("POST", "/forum_post_photos.json", true);
  xhr.setRequestHeader("X-CSRF-Token", Rails.csrfToken());

  xhr.upload.onprogress = function(event){
    var progress = event.loaded / event.total * 100;
    attachment.setUploadProgress(progress);
  }

  xhr.onload = function(){
    if (xhr.status == 201){
      var data = JSON.parse(xhr.responseText);
      return attachment.setAttributes({
        url: data.image_url,
        href: data.image_url
      })
    }
  }

  return xhr.send(form);
}

document.addEventListener("trix-attachment-add", function(event){
  var attachment = event.attachment;

  if (attachment.file){
    console.log('new',attachment);
    return uploadAttachment(attachment);
  }
});

shrine.rb

require "shrine/storage/s3"

s3_options = {
  bucket:            Rails.application.credentials.aws[:bucket_name], # required
  access_key_id:     Rails.application.credentials.aws[:access_key_id],
  secret_access_key: Rails.application.credentials.aws[:secret_access_key],
  region:            Rails.application.credentials.aws[:bucket_region],
}

Shrine.storages = {
  cache: Shrine::Storage::S3.new(prefix: "cache",upload_options: { acl: "public-read" } , **s3_options),
  store: Shrine::Storage::S3.new(prefix: "store",upload_options: { acl: "public-read" } ,**s3_options),
}

Shrine.plugin :activerecord
Shrine.plugin :presign_endpoint, presign_options: -> (request) {
  filename = request.params["filename"]
  type     = request.params["type"]

  {
    content_disposition:    "inline; filename=\"#{filename}\"", # set download filename
    content_type:           type,                               # set content type (required if using DigitalOcean Spaces)
    content_length_range:   0..(10*1024*1024),                  # limit upload size to 10 MB
  }
}
Shrine.plugin :restore_cached_data

trix 上传

require "shrine/storage/s3"

s3_options = {
  bucket:            Rails.application.credentials.aws[:bucket_name], # required
  access_key_id:     Rails.application.credentials.aws[:access_key_id],
  secret_access_key: Rails.application.credentials.aws[:secret_access_key],
  region:            Rails.application.credentials.aws[:bucket_region],
}

Shrine.storages = {
  cache: Shrine::Storage::S3.new(prefix: "cache",upload_options: { acl: "public-read" } , **s3_options),
  store: Shrine::Storage::S3.new(prefix: "store",upload_options: { acl: "public-read" } ,**s3_options),
}

Shrine.plugin :activerecord
Shrine.plugin :presign_endpoint, presign_options: -> (request) {
  filename = request.params["filename"]
  type     = request.params["type"]

  {
    content_disposition:    "inline; filename=\"#{filename}\"", # set download filename
    content_type:           type,                               # set content type (required if using DigitalOcean Spaces)
    content_length_range:   0..(10*1024*1024),                  # limit upload size to 10 MB
  }
}
Shrine.plugin :restore_cached_data
 trix-upload
function uploadAttachment(attachment) {
  var file = attachment.file;
  var form = new FormData;
  form.append("Content-Type", file.type);
  form.append("forum_post_photo[image]", file);

  var xhr = new XMLHttpRequest;
  xhr.open("POST", "/forum_post_photos.json", true);
  xhr.setRequestHeader("X-CSRF-Token", Rails.csrfToken());

  xhr.upload.onprogress = function(event){
    var progress = event.loaded / event.total * 100;
    attachment.setUploadProgress(progress);
  }

  xhr.onload = function(){
    if (xhr.status == 201){
      var data = JSON.parse(xhr.responseText);
      return attachment.setAttributes({
        url: data.image_url,
        href: data.image_url
      })
    }
  }

  return xhr.send(form);
}

document.addEventListener("trix-attachment-add", function(event){
  var attachment = event.attachment;

  if (attachment.file){
    console.log('new',attachment);
    return uploadAttachment(attachment);
  }
});

长话短说，我在论坛上使用 trix 作为富文本，所有模型和 Controller 都在工作，我正尝试通过拖放到编辑器中直接上传，如图所示 here但无法正确获取 js。

所有其他配置都是直接从 documentation 设置的

照片正在上传到我的 aws，但几分钟后就会过期

示例:https://sprout-free-forum-photos.s3.amazonaws.com/store/de6271df193b0ae16e14c3297c58c363.jpg?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=AKIAINSUNFHRJEDP6TQA%2F20181027%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20181027T192116Z&X-Amz-Expires=900&X-Amz-SignedHeaders=host&X-Amz-Signature=a4c9da3b5933ca29954dfaf11e592543c69a5a7ad1d4dcd3b70747ef0a695c38

即使我的存储桶设置为公开阅读

任何帮助都会很棒我迷路了!

这是当前站点 live和 here是我的完整 git

Answer 1

今天也遇到了这个问题。

还将 Shrine 与 AWS S3 一起使用，并在旧的 Rails 应用程序中使用 Trix。

我注意到图像存在于 S3 服务器中，只是 Trix 使用的 URL 不起作用。

在搜索了一些其他类似的问题后，遇到了这个:https://stackoverflow.com/a/51197576/2561325

答案来自神社 gem 的维护者之一。您所要做的就是在 config/initializers/shrine.rb 中的 shrine 初始化程序中应用公共(public)设置。

我的问题现在已解决，Trix 编辑器使用的图像不会过期。