用 Vue 写 Electron 的一次问题解决

有一个需求,大致是在本地软件上提供一个图片上传界面,用户「上传」图片后,将图片存至本地的用户目录,然后在上传界面将图片显示出来。

选用 ElmentUI 的 upload 组件。

由于该组件完美地封装为远程上传,而我其实并不需要「上传」,只需要将图片拷贝到自己的用户目录,所以走了许多弯路。

其一是该组件提供了一个名为 action 的 必选参数,提供了图片上传的地址。由于它是必选的,所以我把突破口放在它身上...其实不用管它,通过钩子 http-request,就可以实现自定义上传了。比如我就可以在这里面实现自己的图片拷贝逻辑。

其二就是图片显示了。Vue 里 imgsrc 不能直接使用本地路径,若想要显示本地图片,需要用 require 把图片当作资源引入进来,再传给 src。但是 require 又不能用变量作为参数。按着前人的经验尝试了下用变量拼凑为字符串再传入,始终不行。

How to load dynamic images in Vue and Nuxt with ease

虽然没从上面这篇文章解决问题,但学到了几个用法。

最后比较自己和前人的异同,翻来覆去地比较,似乎就只有这么一个差异:自己本地图片的路径是在项目之外的,像这样:/home/user/.config/...。而前人们的本地图片一般都在项目文件夹的 assets 之类的地方...

但是直接 src:"/home/../a.jpg" 这样也是可以显示的啊?两者真有什么不同吗?

一番搜索,注意到几个 local disk 之类的关键词,然后才联想到操作系统层面的 API,意识到可能应该从 Electron 着手。

键入关键字「electron img local disk」,第一篇就是这个:Load images from local disk

这位兄弟代码和我惊人的相似,暗骂一声心想终于稳了。

于是最后通过大兄弟使用的 :src="'file://'+ imageItem.url" 这样的写法实现了。(注意要在 Electron 的配置里设置 显示图片的那个窗口webSecurityfalse。)

其实我之前尝试过用 file:// ,但是 file:// 放在 URL 的变量里也要报错,必须通过 :src="'file://'+ imageItem.url" 这样拼凑字符串才行。

甚至 :src="'file:/'+ imageItem.url" 这样拼也不行。(此时我的 URL 类似这样 /home/...

真是醉人。

总结:一个是对自己用的东西不熟悉,光是靠着面向搜索引擎是不够的。要是我足够屌,我就可以深入源码去了解到底是为啥了。可惜我不屌。第二个就是即便做一个「Ctrl C/V」程序员,也要学会分析问题。

作为一个 CVer(自造),有时候离正确答案就差一组合适的关键词。(至少学着去找到这组关键词)