记不得，憋不住 | Can't Remember, Can't Shut Up

之前, 我们利用pastebin系统实现了用API添加文本文件 . 如果我们想保存二进制文件, 要怎么办呢? 这里, 我们利用图床系统imghost.

还是之前的短链项目. 今天拿 FireFox 来调试, 发现图床的显示效果有问题. Edge 和 Chrome 显示正常.

上一篇, 我们找到了合适的代码来显示不同类型的内容. 有的是大段文字, 用textarea来显示; 有的是图片, 用img来显示. 但是我们使用一个怎样的代码结构呢? 我想了一下准备这样: 1. 把不同的显示方式包装为不同的函数, 放到 main.js 中. 如: function buildValueTxt(longUrl) {} function buildValueImg(longUrl) {} function buildValueTxtarea(longUrl) {} 2. 设置一个函数变量, 在不同的 index.html 中, 赋值为不同的函数, 如: 在短链的 index.html 中 buildValueItemFunc = buildValueTxt 在 Pastebin 的 index.html 中 buildValueItemFunc = buildValueTxtarea 在图床的 index.html 中 buildValueItemFunc = buildValueImg 3. 在 main.js 中, 使用同样的代码逻辑: // 长链接信息 Long url child.appendChild(buildValueItemFunc(longUrl))

在 短链系统, 网络记事本系统, 图床系统 中, 已保存数据的列表的显示方式 需求是不同的. 记事本系统, 应该用一个多行文本框来显示 value. 如下: 图床系统, 应该以图片的形式显示 value. 如下: 短链系统就是原来的显示方式. 以文本形式显示全部value即可. 代码已经有了. 功能也是对的.  现在问题是, 怎么合理的设计代码结构, 让 worker.js 里面的配置项可以控制列表的显示方式. 设置什么系统的配置项是在 worker.js 里面. 最多还有一项, 控制加载哪个 index.html 但是实现列表显示的功能在 main.js 里面.  main.js 这个文件在 Github 上. 在 index.html 文件里面指定加载. 如果把 main.js 的文件内容搬出来放到 index.html, 然后不同的系统使用不同的 index.html , 小改一下 JS 代码的逻辑, 实现显示效果的差异.  这样是能够实现效果没错, 但 main.js 里面大段相同的代码要复制到每个 index.html 里面, 太不优雅了.  如果以后, 相同部分的代码需要修改, 那就是霰弹枪伤, 要打开这么多个index.html一个一个的改, 如果改错了, 漏掉了, 就有问题了. - To Be Continued

需求 上一步我们已经实现了图床的核心功能 , 保存和读取数据. 但是为了把图片转换为Base64数据, 还要 另外开一个页面 , 这也太... 所以我们把这个页面"借鉴"到自己图床的操作页面上. 思路 建一个 card (Bootstrap里的class). 把 左边页面中的功能 "借鉴"过来. 再建一个 "Next" 按钮, 用于把新card里面的数据同步到原有的元素中. 实践 代码的细节就不讲了. 都是一些细细碎碎. 唯一有点的可说的价值的就是, 被借鉴的网页是使用 Bulma 的CSS框架 的. 我考虑了一下, 我的项目里还是继续使用 Bootstrap. 为了更好的 input file组件, 我转为使用 Bootstrap V5 (之前使用的是v4). 然后显示操作结果的弹窗就有一些异常了. 请教了一下GPT, 再结合  Bootstrap的官方文档 , 里面有一些属性的名字有变化. 新建了一个“主题”，theme/imghost ======== 完 Github: https://github.com/crazypeace/url-Shorten-Worker/ 演示站: https://imghost.crazypeace.workers.dev/imghostimghost

需求 在 NodeSeek 上发贴, 是要自备图床的. 我们已经实现了单纯的KV数据库 . 那么, 同样的原理, 图床不就是一样的事情吗? 发给系统一个path, 系统还给你一个图片的数据. 思路 我设计在KV中保存图片的base64数据. 因为这样可以在KV的后台中直接管理; 人眼阅读后台数据时, 不会有奇怪的字符; 在复制粘贴, 不同的系统之间复制转移, 会比较方便. 坏处是, 数据量会变大, 变大 33%. 实践 图片转base64先利用其它网站实现, 如  https://oktools.net/image2base64 这样一个gif图片 得到下面这一大段base64数据. 我们在pastebin的基础上, 使用这些base64数据当作value, 设置233.gif当作key. 保存之后, 我们可以通过233.gif再获取这些base64数据, 像这样: 求助 GPT, 得到下面这段代码来把 base64 数据转化为一个图片返回给http请求. 把这段代码的函数添加到worker.js function base64ToBlob(base64String) {   var parts = base64String.split(';base64,');   var contentType = parts[0].split(':')[1];   var raw = atob(parts[1]);   var rawLength = raw.length;   var uInt8Array = new Uint8Array(rawLength);   for (var i = 0; i < rawLength; ++i) {     uInt8Array[i] = raw.charCodeAt(i);   }   return new Blob([uInt8Array], { type: contentType }); } 然后在返回http请求之前, 多处理这么一步, 就行了. 效果如下: ======== 完 把代码整理漂亮一点, 再上传. 用一个配置项设置系统的类型. Github:  https://github.com/craz...