这个 bug，硬是让我折腾了一周

桃扇骨 2022-08-28 03:57 213阅读 0赞

> 愿世间 bug 温柔对待于我吧，求求了…

大家好，我是 Chocolate。

这一周下来几乎都在折腾 bug，别说了，有一丢丢寒酸，头发那不是一根一根掉，那是一把一把掉落。不过就在今天算是解决了大的问题，只剩下小问题了，后续优化一下就差不多了。

### 闲聊 ###

开头还是闲聊会，感觉也挺巧的，上周就收到微信通知晚餐会免费了，这周就为了这个改 bug 加班了几天，免费的晚餐虽然很香，但刚开始排队还真的等了接近半个小时才打到饭。

当我端到饭的时候，已经处于饥饿状态了。连忙干饭，干完饭就回家了。

### 接到的需求 ###

下面来说说这个困扰我一周的需求吧，当时接到的就是将用户反馈一些信息的页面，原本是 textArea 的文本输入框，发现用户需要提供一些图片辅助说明的时候，不是很方便，原本是采用附件上传的形式。

原本这个附件上传的方式有多麻烦呢，直接对比看 QQ 截图以及微信截图，我们截图了之后就可以直接粘贴到输入框，然后发送给别人，这样就很方便。但是附件的话，我截图了之后还要保存到本地，可能保存在桌面，或者其它地方，然后再点击附件上传按钮上传图片或者文件。

对于用户来说体验不是很好，还有一点不足的是附件上传就不能保持排版了，比如用户输入了一段文字，然后这段文字是介绍接下来图片里面的问题，然后接下来又有一段文字，再接下来又要放一张图片，那么这个显示图片就会有排版问题。

因此需求就是转变成 MarkDown 形式，这样方便图片粘贴上传了，配合腾讯云 COS 对象存储，获取上传之后的图片地址，在输入框显示。

### 遇到的问题 ###

看起来好像上述需求不是很难，关键点在于调用腾讯云那边的 COS 就好了，返回图片地址。

但是我还是遇到了问题，首先是我上传了之后，那个请求会一直 403，我感觉好奇怪，怎么一直 403 呢？

因为在此之前其它项目代码仓库有使用过 COS，所以参考了一下，发现存储桶的相关配置，比如 SecretId、SecretKey 以及 Bucket 和 Region 等都是从后端接口那边获取的，没有看到相关字符串。

其实这个需求点之前是我工作导师做的，不过做了好久了，他说都忘记怎么做了，当我询问这个问题的时候，他和我说你可以用你自己的 COS 试一下。

好，试试就试试，我拿着手机扫了腾讯云官网的二维码，注册了一个个人的 COS，把所有的访问权限都打开了，然后改了改现在的代码，居然成功实现了！

首先是我在编辑器粘贴之后成功获取了图片地址，并且可以显示出来，不过当我上传当前表单的时候，又有问题了，在接收方那边无法正常显示。

我就奇了怪了，我这边不是正常显示出来了嘛，我感觉有点不对劲了，直接上号滴滴组内产品经理，产品经理和我导师讨论一下这个需求，当时导师就在线上滴滴了我，说这个不能用 MarkDown，因为处理这个需求的那边页面不支持，只有我们官网这边可以正常显示，并且你提交过去必须按照他们那边的格式提交，那边项目比较老，不支持 MarkDown 形式，推荐你用富文本编辑器。

> 这里补充一下：虽然我已经转正成为正式员工了，本文中多次提及了导师这个词，但是平常我基本上不喊导师的哈哈哈，他是我们组内大牛，向大佬学习。

### 转变需求 ###

于是乎，我之前写的大部分代码就需要重写了，有些包导入的可能要删去了，把原本使用公司封装好的 MarkDown 编辑器给删掉了。

到网上搜了搜关于 React 比较好用的富文本编辑器，当时搜到了 Braft Editor，美观好用的 React 富文本编辑器，而且是基于 DraftJS，具有强拓展性。

https://braft.margox.cn/

当时看到了强拓展性和基于 DraftJS，我觉得就已经可以了，因为对于我这个需求来说的话，不需要很多其它按钮，比如下划线呀，加粗，字体变大变小，插入其它等等。

另外一点是， 我看到了这个基于 DraftJS，因为看了之前 MarkDown 也是基于 DraftJS 这个来做的，我想应该还可以的。

不过在做的时候发现，我上传的图片和文字会有排版问题，而这个库对于这个转换不是很好（或许也是我自己找不到解决方式），并且这个文档总感觉差点味道，折腾两天样子还是没有结果，想了想，还是不能卡在这里了。

于是我又换了思路，在网上继续搜索有没有比较好的富文本编辑器，文档也会更加全面的，我记得是从掘金的一篇文章了解到的，好像正是这个富文本编辑器作者发布的。官网地址如下：

https://www.wangeditor.com/

> 争做国内使用体验Z好的开源 Web 富文本编辑器！

上面是官网看到的一句话，而且这个编辑器是有团队来开发的，很有开源精神！

最后到周五的时候，我总算是解决了难点问题，具体情况如下：

最开始看那个封装好的 COS 代码，在上传之前有 `getAuthorization` 这个操作，需要获取签名，但是当我们调用 cos.putObject 方法上传文件的时候，我发现居然是 XML 形式，这个上传地址无法在富文本编辑器正确显示，但是又能在处理这个需求的那边页面正确显示。

于是，我得解决当前输入框内粘贴图片之后的显示问题。后面了解到，可以根据 key 获取对应的真实图片 Url，倒是解决了这个问题。

### 再遇问题 ###

可怕，又遇到了问题，虽然这个图片能够在发送方和接收方正确显示了，但是当我在提交之后的显示详情页面，点击我之前上传的图片的时候，发现会有跳转一个新的浏览器标签页，我以为是正常的预览图片页，但没想到的是居然是下载的形式。

我百思不解，于是去了腾讯云官网瞧了瞧，发现运维那边配置的存储桶域名格式是为 JSON 版本域名。

链接如下：

https://cloud.tencent.com/document/product/436/30740  
![请添加图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA55m-5LiqQ2hvY29sYXRl_size_17_color_FFFFFF_t_70_g_se_x_16]  
而这个 JSON 版本域名生成的链接就是会访问弹出下载的窗口，官网也是**强烈推荐**升级到最新版的控制台，看来这个问题得找运维来解决了。

**思考**

也许这个问题找运维可能一下就解决了，但是可能又解决不了，就是我目前不清楚是否可以得到允许升级这个控制台，另外要考虑的是这个升级会不会对其它已经生成的图片有影响等等，如果就为了我这个小点而升级却不兼容以前版本的话，估计不会让我升级。

不是上文有提及说这个可以通过 key 来获取对应的真实图片地址嘛，那么是不是可以这样解决呢？

本周关于这个需求是做到这个点了，还有的事情就下周再说啦。

周五准备部门的团建，出发去珠海海洋王国游玩两天~

不过到今天我也是游玩回来了，现在正是补充之前还未写完的这篇博客，下一篇会聊聊在珠海游玩的一些想法，还有一些照片啦。

### 结尾 ###

本篇文章就到此结束啦，每隔一段时间写写随笔，如果你有触动的话，可以帮我**点点赞**，这样我就知道有一批默默关注着我的小伙伴啦。

喜欢我的文章可以点点关注，下次我们还能遇见，**关注**就是最大的动力啦。

我是「一百个Chocolate」，一位狮子座的程序员，坚持写博客的第 4 年，座右铭：学如逆水行舟，不进则退。

> 今天是 1024，就祝各位程序员门少点 bug，升职加薪，遇到心仪的另一半，走上人生巅峰！

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5LiA55m-5LiqQ2hvY29sYXRl_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/a4d4942d34af424abbee0f9ddc584899.png