比较简单,有一个customUploadImg钩子函数:
const editor = new Editor(this.$refs.editorcontainer); editor.config.height = 300; editor.config.customUploadImg = async (files, insertImgFn) => { for (let file of files) { const param = new FormData(); param.append("file", file); const res = await this.$http.post( buildUrl("/sys/oss/upload", false), param, { headers: { "Content-Type": "multipart/form-data" }, } ); insertImgFn(res.data.data.url); } };
这里顺便记录一下在还没有服务器时,如何让图片仅仅显示在本地,方法也同样是在这里调用 insertImgFn 方法,这个方法接收一个字符串的url,然后会自动在当前光标位置插入一个img标签,src即是传入 insertImgFn 的url,只要它是一个可显示的url即可。那么意思就是本地的blob url也是可以的了,所以这里有如下两种方式直接显示本地图片。
方法一:
for (let file of files) { insertImgFn(URL.createObjectURL(file)); }
方法二:
for (let file of files) { const r = new FileReader(); r.readAsDataURL(file); r.onload = function () { insertImgFn(r.result); }; }
补充一些课外知识:
Blob是浏览器内支持的高级JS对象,File继承自Blob,所以File也是一种Blob,Blob如何获取暂且不管,File如何获取呢?最常见是通过input标签来获取:
<input type="file" onchange="showFile(this)"> <script> function showFile(input) { let file = input.files[0]; alert(`File name: ${file.name}`); // 例如 my.png alert(`Last modified: ${file.lastModified}`); // 例如 1552830408824 } </script>
上面的file即是File的一个对象实例,为什么是input.files[0]?回忆一下,选择文件的时候有时是不是可以多选?多选了数组就会有多个成员,单选的话就只有一个成员。
以上是通常的获取File实例的方式,在wangEditor里,customeUploadImg钩子方法也会传进来File的数组,里面都是File实例。刚刚说了,File实例也是Blob,有了Blob,我们有两种方法把它变成可被src或者href接收的东西:
URL.createObjectURL(file)
FileReader 的 readAsDataURL
以上,备忘。