现在,以编程方式在 Electron 中上传文件,是非常简单的!

必要的上下文

想尽快熟悉上下文语境的,可以点这里: https://github.com/electron/electron/issues/749

这段讨论,其实本来是讨论如何自动设置 input 标签的值来实现自动选择文件的.前一段有个 Electon 中自动上传文件的需求,被 Google 带到了这个讨论地址.虽然,最后当时是采用的不同讨论中的本地代理器转发cookie的策略,但不得不承认,这些讨论还是给了自己很大启发的 – 虽然暂时并没有什么用.

It’s near impossible to programmatically upload a file in electron right now.

当时,讨论区 @erikmellum 的一句 “现在在Electron 中,以编码方式上传文件,几乎是不可能的”,让我放弃了对 Electron 本身机制的思考.转而,基于当时 App 已有的本地代理服务器, 做了另一番尝试.当然,最后也是成功了.这个机制,等会儿我会简单描述下.因为它已经不是重点了! 因为已经有了更简化的方式.

这个问题的关键是在于如何获取完整的 cookie,特别是 session 相关那一部分的 cookie.今天突然又看到 electron 文档的 session 部分,看到它有一个 cookies 属性.心想,这个 cookies, 既然是属于 electron 自有的 api,那岂不是也可以获取完整的 cookie ?试了下,还真是! 卒~

技术关键点分析

Electron,结合了 Node 和 Chromium.在相当程度上,可以认为它同时拥有了 Node 和 Chromium 的能力;另一方面,其实也可以认为,它拥有了 Node 和 Chromium 各自的限制.在 Electron 编码时,如何理解和运用 Node 和 Chromium 各自的限制和能力,就变得很有趣.如果能进一步地熟练打通 Node 和 Chromium ,真的可以做某些以前很难去想象的事.

具体到以编码方式上传文件这个问题上.这个问题的完整描述应该是类似于这样: 网站有自己的登录认证机制,在不需要在对网站登录机制做任何修改的前提下,如何自动上传用户相关的文件,比如用户头像?

我们就以自动上传用户头像为例.我们可以假定已经通过某种方式,得到了用户头像的本地路径.–这个大前提,在基于 Electron 的App中,非常容易满足!

对于 Chromium 侧的童鞋来说,拿到文件的本地路径后,是没有比较简便的办法实现文件上传的. https://github.com/electron/electron/issues/749#issuecomment-145764807 讨论中,提到的两个地址,再结合 https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects 或许应该也是可以的.我没验证!

对于 Node 层的同学来说,有了文件路径,可以很容易地通过 https://www.npmjs.com/package/request 库来实现文件的上传,如果他能拿到当前回话的完整 Cookie 的话.当然,这个限制,也是有足够多的方式来弥补的,比如让用户在桌面 App 上,再单独登录一次.不管怎样,解决问题就好.

但是,Electron 提供了一种全新的可能.它让你可以在 Node 侧,直接拿到 Chromium 侧的完整 Cookie.然后你就可以使用 Node 的方式,以最精简的代码,最符合直觉的方式来处理文件上传.

好吧,借题插一句:我曾经处理过一个 XML 文件解析的需求.当时搜了各种 Node 库,都没太好使的,后来我是直接在 render process 中,直接用 html 的dom 接口去读取和解析的 xml 文件! – 当时,被自己的机智惊呆了! 讲真, 使用 Electron 来开发桌面 App,你真正需要考虑的不是如何实现某个需求,而是如何以一种更优雅的方式来实现需求! 没有做不到,只有不敢想啊!!!

一个简单的实例: 实现开源中国用户头像自动