js 如何获取 file:///路径的图片?

Question

<img src="file:///private/var/folders/gg/m4j7190s7klg4zhpr5k_bp6r0000gn/T/com.kingsoft.wpsoffice.mac/adasd/ksohtml/wpsAUf4kV.png" width="100%" height="100%">

这个图片地址是从word文档复制过来的，发现在页面中无法展示，我想根据这个file路径获取到文件流，上传到阿里云。
请问大佬们有什么方法可以获取

Answer 1

因为浏览器无法直接读取file，所以需要获得text/rtf再进行转换，还是挺麻烦的。有一些富文本编辑器有插件可以实现这种功能，如CKEditor的ckeditor5-paste-from-office

Answer 2

浏览器前端因为安全性的问题，是没办法通过本地路劲取获取文件内容的，只通过剪切板内部的图片数据去创建图片元素来恢复。

一般来说主流的富文本编辑器都支持这个功能。如果是想要自己实现的话，可以从 ClipboardEvent.clipboardData - Web API 接口参考 | MDN 这个API入手。
或者借鉴现有富文本编辑器的处理方式例如，CKEdit的图片复制功能源码部分CKEditor 5 paste from Office feature。主要是在这部分ckeditor5/pastefromoffice.js at master · ckeditor/ckeditor5