利用Chrome扩展，揭开图片上传流程的奥秘：从本地到服务器

2024-01-24 14:28:18

前言
在小程序的开发过程中，切图是前端工程师不可避免的任务。由于小程序的主包大小限制为2MB，为了避免超过这个限制，我们无法将所有切图都直接塞入项目文件中。因此，我们需要将切图上传到公司的资源服务器。

开发动机

由于我经常需要在蓝湖上进行切图工作，所以我希望能够找到一种方法来简化切图上传的过程。传统的手动上传方式非常繁琐，需要在蓝湖上下载切图，然后手动上传到服务器。这个过程既浪费时间，又容易出错。

在研究了多种方案后，我决定使用Chrome扩展来实现这个目标。Chrome扩展是一种能够在谷歌浏览器中运行的小程序，它可以访问浏览器的各种API，包括文件系统API。这使得我们可以轻松地获取蓝湖上的切图，然后将其上传到服务器。

在开发Chrome扩展时，我遇到了以下几个主要的挑战：

通过查阅相关文档，我最终找到了解决这些挑战的方法。

获取蓝湖上的切图。我们可以使用Chrome扩展的"webRequest"API来监听蓝湖网站上的网络请求。当用户在蓝湖上下载切图时，这个API会触发一个事件，我们可以通过这个事件来获取切图的URL。
将切图上传到服务器。我们可以使用Chrome扩展的"XMLHttpRequest"API来将切图上传到服务器。这个API允许我们发送HTTP请求，我们可以将切图作为请求的正文发送给服务器。
处理不同格式的切图。蓝湖上的切图可能是多种不同的格式，包括PNG、JPG、SVG等。我们需要对这些不同的格式进行不同的处理，以便将其正确地上传到服务器。
保证上传过程的稳定性。为了保证上传过程的稳定性，我们需要处理好以下几个方面：
- 网络连接问题。如果用户在上传切图时网络连接中断，我们需要能够在网络连接恢复后继续上传切图。
- 服务器问题。如果服务器出现问题，我们需要能够在服务器恢复正常后继续上传切图。
- 扩展本身的问题。如果扩展本身出现问题，我们需要能够在扩展重新加载后继续上传切图。