Plots2: 图片上传失败

还参考 #9442 解决一个小问题。

谢谢@waridrox :+1:

尝试进一步调试问题，从本地文件存储上传图像时出现的错误是
Paperclip::Errors::CommandNotFoundError: Could not run the 'identify' command. Please install ImageMagick.
在本地开发环境下。 我认为这是处理文件上传的paperclip gem 的新依赖项。

使用命令sudo apt-get install imagemagick或brew install imagemagick安装imagemagick ，我在development.rb文件中添加了这两行代码。

Paperclip.options[:image_magick_path] = "/opt/ImageMagick/bin"
Paperclip.options[:command_path] = "/opt/ImageMagick/bin"

之后，我简单地重新启动了服务器，文件上传再次正常运行，文件类型jpeg 、 png和gif 。 这是相同的一瞥 -

https://user-images.githubusercontent.com/58583793/113514702-c308e700-958d-11eb-8e12-59c7a9648b24.mp4

从 stackoverflow 上的_this thread_ ，我们还需要在 production.rb 中添加这两行，以反映生产应用程序中的更改。

同样由于在https://github.com/publiclab/plots2/blob/main/doc/PREREQUISITES.md#image -libraries-optional 中安装 image-magick 的可选参数，首先观察到了这种行为。

谢谢@waridrox ，我取消了您的更改，但仍然出现错误....请其他人尝试一下。 谢谢

哦😅真的很抱歉，请恢复拉动。 它在本地工作吗？ 也许先尝试sudo apt-get update然后sudo apt-get install imagemagick可以帮助...

大家好，在本地，它是一个 imagemagick 是有道理的，但是（或没有 imagemagick）但在稳定版上应该安装它。 我想知道这是否是稳定版的明显错误？ 我们应该交叉检查 Sentry.io。 你有访问权限吗？

感谢您发现并记录这一点！！

除了与个人资料图片有关的图片上传时，我没有看到哨兵错误（这通常是由于垃圾邮件和攻击造成的）。

错误的路径是什么？ 这是500错误？

对不起，我的意思是/最近/错误

@waridrox它在本地对我不起作用，也许我的版本有误.. @jywarren这更像是我的 302 错误

啊哈，确实是302错误......🕵️

我会看看为什么会这样。 谢谢！

我将尝试在 GitPod 中运行它，看看我是否可以重现 302 ...

好的，从 GitPod 得到了一个日志！

Started POST "/images" for 10.4.6.182 at 2021-04-13 18:36:40 +0000
Cannot render console from 10.4.0.249! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by ImagesController#create as JSON
  Parameters: {"nid"=>"null", "image"=>{"photo"=>#<ActionDispatch::Http::UploadedFile:0x00007f444ce23c30 @tempfile=#<Tempfile:/tmp/RackMultipart20210413-4879-sla487.jpg>, @original_filename="11aa-love-ryan2-720.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[photo]\"; filename=\"11aa-love-ryan2-720.jpg\"\r\nContent-Type: image/jpeg\r\n">}}
Can't verify CSRF token authenticity.
Redirected to https://3000-aquamarine-bass-qsunlo8p.ws-us03.gitpod.io/login?return_to=/images
Filter chain halted as :require_user rendered or redirected
Completed 302 Found in 2ms (ActiveRecord: 0.0ms)


Started GET "/login?return_to=/images" for 10.4.6.182 at 2021-04-13 18:36:40 +0000
Cannot render console from 10.4.0.249! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by UserSessionsController#new as JSON
  Parameters: {"return_to"=>"/images"}
  User Load (0.5ms)  SELECT  `rusers`.* FROM `rusers` WHERE `rusers`.`id` = 1 LIMIT 1
   (0.2ms)  BEGIN
  User Update (0.5ms)  UPDATE `rusers` SET `last_request_at` = '2021-04-13 18:36:40', `updated_at` = '2021-04-13 18:36:40' WHERE `rusers`.`id` = 1
   (28.6ms)  COMMIT
Redirected to https://localhost/home?return_to=%2Flogin
Filter chain halted as :require_no_user rendered or redirected
Completed 302 Found in 35ms (ActiveRecord: 29.7ms)

好的，那么为什么我们被重定向到登录...看...

看起来CSRF令牌不起作用......让我们看看......

https://github.com/publiclab/plots2/blob/bd7b2e26c1edbd85a9754d8b25bc27950fd99770/app/views/editor/rich.html.erb#L344 -L347

我们在这里传递它。

$('meta[name="csrf-token"]').attr('content')正确获取令牌，所以不是这样......

请注意，在 GitPod 中，主图像上传器可以工作。 它使用相同的控制器，因此问题似乎出在编辑器的富文本模块代码本身中：

Started POST "/images" for 10.4.0.248 at 2021-04-13 18:47:45 +0000
Cannot render console from 10.4.6.181! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by ImagesController#create as JSON
  Parameters: {"authenticity_token"=>"5Z5plBlzFXbu2qCKPTDZYa54DWaNn556hs9FzyvH2U8NDMabePLVh1RlBuhkRR+Ej+kgI/hLIAm9LcdrEZv4lg==", "uid"=>"1", "image"=>{"photo"=>#<ActionDispatch::Http::UploadedFile:0x000055644bef1898 @tempfile=#<Tempfile:/tmp/RackMultipart20210413-5664-bsht8f.jpg>, @original_filename="11aa-love-ryan2-720.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"image[photo]\"; filename=\"11aa-love-ryan2-720.jpg\"\r\nContent-Type: image/jpeg\r\n">}}

实际上，主图像上传器也在其请求中使用了令牌：

https://github.com/publiclab/PublicLab.Editor/blob/59e5bf6fd1ac2b6f9108e522baa7cdab36e0bb64/src/modules/PublicLab.MainImageModule.js#L94

它正确地获取它：

editor.options.mainImageModule.token
"5Z5plBlzFXbu2qCKPTDZYa54DWaNn556hs9FzyvH2U8NDMabePLVh1RlBuhkRR+Ej+kgI/hLIAm9LcdrEZv4lg=="

确认的。 主图片上传在表单请求中有这组参数：

authenticity_token: 5Z5plBlzFXbu2qCKPTDZYa54DWaNn556hs9FzyvH2U8NDMabePLVh1RlBuhkRR+Ej+kgI/hLIAm9LcdrEZv4lg==
uid: 1
image[photo]: (binary)

而内联图像上传只有这些：

nid: null
image[photo]: (binary)

检查该部分代码的最新更改以及模块选项本身，以确保它从构造函数正确存储/传入。

哇，深坑。 通过https://github.com/jywarren/woofmark/pull/2追回woofmark库： https :

它存在于我们的woofmark分支中：

https://github.com/jywarren/woofmark/blob/plots2/src/prompts/prompt.js#L133

我相信28天前的这个PR可能是相关的。 我们使用的woofmark分支的最后一次更改发生在 2020 年 9 月。

https://github.com/jywarren/woofmark/pull/76/files

我在woofmark的代码中没有看到任何内容——现在有 2 条路线：

1. 通过 Woofmark 跟踪upload.xhrOptions参数并确认它正确获取
2. 查看xhr npm 模块是否已更改

https://www.npmjs.com/package/xhr 在5 个月前发布了 2.6，但在我们的项目中已经在 2.2.1 上发布了好几个月。 在 package-lock.json 中确认

好的，所以upload.xhrOptions参数beforeSend确实使它成为woofmark ，如在 JS 控制台中测试的那样。

它实际上会生成额外的标题吗？

xhrOptions: { 
        beforeSend: function(xhr) { xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) }
      },

天哪，我不知道这什么时候停止工作，但我认为我们可以添加另一个formData参数并这样做？？？ 但不确定它是否会被其他人忽略，或者 xhr 库是否会忽略它？

注意到这可能发生在 2020 年 11 月 5 日在https://github.com/publiclab/PublicLab.Editor/releases/tag/v3.0或 28 天前在https://github.com/publiclab/plots2/pull/ 9323

根据这一行，我相信formData应该正常传递：

https://github.com/bevacqua/woofmark/pull/44/files#diff -b70752c6e4fb751c6aa381f57afac66c25cc2d401b141b03e1751d81e60efcd2R216

将在 GitPod 中尝试：

      formData: {nid: null, authenticity_token: _module.options.token},

...做到了：

将修复https://github.com/publiclab/PublicLab.Editor/pull/712 ，发布3.0.3，并添加额外的formData令牌https://github.com/publiclab/plots2 /拉/9504。

哇！

完成并在稳定版中确认！

@publiclab-mimi 今天报道说

在研究笔记编辑器中，我无法上传 JPEG、PDF 或 PNG。
在 Google Chrome 和 Safari 上，拖放和浏览选项

@ebarry ，由于将更改推送到实时版本所需的缓冲时间，我认为当前版本仍然没有上述更改。 那是因为图像/文件上传适用于稳定版本和旧版本。

新代码昨晚上线了！ 看一看，我看到了一个新错误 - 500 错误：

从这个开始，与 Cess 发现的 302 相同：

然后重定向到这个新的 500 错误：

这实际上是在成功登录后，我相信，但这很奇怪，因为我已经登录了？

我想 Sentry 在这里记录了它，但我不确定错误是在登录尝试之前还是之后发生。

https://sentry.io/share/issue/13e10e65210c4ceb9860ec687482d9b7/

```
ActionView::MissingTemplate
缺少带有 {:locale=>[:en], :formats=>[:json], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, 的模板主页/主页：红宝石，：咖啡，：jbuilder]}。 搜索于：

• “/应用程序/应用程序/视图”
• “/usr/local/bundle/gems/grape-swagger-ui-2.2.8/app/views”
• “/usr/local/bundle/gems/grape-swagger-rails-0.3.1/app/views”
• ```

嗯，在跟踪这个时遇到问题，所以我会再次尝试在 GitPod 中重现？？？

好的， @icarito和我能够解决一个纱线更新问题以引入真正的3.0.3编辑器代码，确认它，然后修复另一个与 SSL 相关的nginx配置问题，现在是在现场工作。 谢谢大家！

: then:: then:: then:

惊人的！！！ 谢谢你