在富文本编辑器中拖拽未选中的图片时,图片会被重复上传

我不确定这是否是一个设计问题,但目前我会将其归入此类。

在富文本编辑器中上传图片:

  • 如果您点击它(即选中它)然后拖动它,图片将会被移动。:smiley:
  • 如果您在未先点击它的情况下直接拖动它,它将被视为新的图片资源,并会再次执行上传操作……:sweat_smile:

我对后一种情况感到困惑,因为我认为无论是否点击它,拖动操作都应该移动图片的位置,而不是重新上传。:slightly_smiling_face:
如果这不是一个错误而是有意为之的设计,欢迎大家说明在什么场景下会需要重复上传。:grinning_face_with_smiling_eyes:

2 个赞

我无法复现这个问题::woman_shrugging: 也许其他人可以。

你使用的是哪个浏览器?

Edge 浏览器,版本 145.0.3800.82,我刚更新到 148.0.3967.54,但问题并未改善。

是的,我希望有人能成功复现它。:face_with_head_bandage:
我只能确认该问题确实存在,但不知道具体原因。
起初,我网站的一位用户向我抱怨,他们在拖拽自己上传的图片时遇到了此问题。当时,我也很难复现,除非直接复制用户用于上传该图片的 Markdown 代码。这似乎与网站本身以及附件本身都有关(有问题的图片似乎都是 PNG 文件),而且我在 Meta 上也无法复现(即使我上传了相同的附件到 Meta),因此该问题被暂时搁置。
在我创建此主题的那天,我突然想到一个主意,尝试使用视频中 Discourse 默认标志的 PNG 图片,最终成功在 Meta 上复现了该问题。或许你可以使用 ![image](/images/discourse-logo-sketch-small.png) 进行一些尝试?

总之,这确实是一个极难触发的边缘情况,但一旦触发,对于同一网站的同一附件,它将稳定地复现。

不行,抱歉,无论我尝试以何种方式拖动,即使使用示例徽标,也无法触发该问题。

我还没有准备好 Edge 进行测试,所以这可能是浏览器相关的问题。您能在 Chromium 浏览器中测试一下吗?

你好,正在尝试(在 Edge 浏览器,版本 148.0.3967.54(官方构建)(64 位))复现此错误…

…正在上传我的猫…



这是图片后的文本

2 个赞

Edge 不就是 Chromium 浏览器吗?

嗯……我尝试复现这个 bug,但到目前为止还没有成功。如果您能提供更具体的信息,我会再次尝试并汇报结果。

2 个赞

我不明白——你是怎么在没有先点击它的情况下直接拖拽它的?

我看到您的帖子中有两处 ![image](/images/discourse-logo-sketch-small.png)。这是成功复现的结果吗?也就是说:您能否使用小徽标复现,但无法使用您的猫咪图片复现?

首先将光标置于另一段文本上,然后在图像上按住鼠标左键并直接拖动。如果先点击(然后释放)再拖动,实际上会选中该图像。

好的,在 Edge 浏览器中,使用富文本编辑器,从头开始尝试…

正在下方上传一张新图片…

… 现在将图片拖动到下一段下方…

这里是下一段…

这是下一段。我现在将把图片拖动到这里下方…

在上面的测试中(在最新的 Edge 浏览器和 Discourse 编辑器的富文本编辑器中执行),拖拽之前上传的图片似乎正常工作——我没有看到需要重新上传的提示?

也许你很幸运,从未遇到过这个 bug :smiley:。但无论如何,在下面的视频中,我使用 KeyCastOW 演示了触发“上传”和“移动”这两个操作的关键按键流程,以便你和其他人能清楚地理解具体过程。


上传 - 按住鼠标左键并直接拖动


移动 - 按住鼠标左键点击后再拖动

顺便一提,我刚刚用你的猫(![image](https://d11a6trkgmumsb.cloudfront.net/original/4X/c/8/4/c84af711be6e56b1fa1500710edd6869364935da.png))和你的另一张图片(![image](https://d11a6trkgmumsb.cloudfront.net/original/4X/8/9/8/89898942816045cca658884fa050bacd20f3cdfb.jpeg))进行了测试,发现它们都无法触发此问题。

我建议你使用 ![image](/images/discourse-logo-sketch-small.png) 进行测试;至少据我所知,这是一份能够可靠复现该问题的测试素材。如果你用它也无法复现该问题,那也许你只是格外幸运罢了。:wink:

这个问题是否仅限于这张特定的图片?


以下 2 条在 RTE 模式的编辑器中粘贴…

![image](/images/discourse-logo-sketch-small.png)

![image](/images/discourse-logo-sketch-small.png)


以下 2 条在 Markdown 模式的编辑器中粘贴

!\[image\](/images/discourse-logo-sketch-small.png)

在后一种情况中,你的意思是认为有两份不同的图片/文件实例/副本被上传,并且服务器随后存储了两个文件吗?

还是说,粘贴的图片实际上直到你点击它(在上传之后)才会被上传到服务器(此时只有该图片/文件的一个实例被上传并存储到服务器上)?

不,我的网站上有多张图片可以复现该问题,但我尚未对 Meta 进行深入调查,目前只发现了这一个案例。

不,事实上 Discourse 比我们想象的更智能。例如:
我网站上的某位用户上传了一张图片,在 Markdown 编辑器中显示如下:

...
![pic|370x494, 40%](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg)
...

我通过浏览器的开发者工具获取了其完整链接:https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg。因此,我在编辑器中使用完整链接格式引用了该图片:

![image](https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg)

在富文本编辑器中拖拽(触发上传)但不点击后,Markdown 编辑器中的内容变为:

![image](https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg)

![image|370x494](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg)

可以看出,尽管 Discourse 显示拖拽会触发上传,但图片实际上显示为 ![image|370x494](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg),这与该用户最初上传的附件 https://example.com/uploads/default/original/1X/8826bc6c1be0e501979df4a004b9b2ae51c50320.jpeg 对应的是同一文件。

  • ![image|370x494](upload://jqrVvqCoYL0wuOvUZWTDwhYw8IU.jpeg) 格式引用图片进行拖拽,也会得到相同的处理结果。

从这个角度来看,再次触发上传实际上并不会占用额外的存储空间——只有第一次上传的文件真正占用了服务器存储。因此,这只是一个用户体验问题:用户会困惑“为什么拖拽图片(当我点击并拖拽但不松开鼠标时)无法按预期移动,反而显示正在上传并重复了图片?”

1 个赞

那么我暂时可以得出结论(好消息!):图片似乎并没有被重复上传,而实际上只上传了一次?

1 个赞