完成上一步之后我们的控件插入图片时只能简单地插入远程的图片，还不能支持图片上传。下面我们就来开启图片上传功能。
第一步在初始化空间时加入图片上传事件拦截器：
//定以后就会有上传功能，当选择文件后就会激活这个方法，blob是文件对象，success是成功的回调函数，fail是失败的回调函数。
images_upload_handler: (blob,success,fail)=>{
let data = new FormData() //创建表单对象
data.append('file', blob.blob()) //添加文件数据，注意第一个参数跟后台的取文件参数要一致。
fetch('http://localhost:8182/file/upload', {
method: 'POST',
body: data
}).then((response)=>{
if (response.status === 200){
return response.json()
}else{
return {success: false};
}
}).then((data) =>{
if(data.success){
//如果上传成功，通过success回调函数返回图片的访问路径。
success("http://localhost:8182/file/downloadFile/"+data.fileUrl);
}else{
fail();
}
}).catch(function(error) {
alert('request failed', error)
})
},
这个功能需要后台服务协助其中：http://localhost:8182/file/upload 接口是上传单个文件接口。http://localhost:8182/file/downloadFile/{filename} 是下载文件接口。上传文件时如果成功会返回上传文件的文件名。我的测试代码就直接把文件保存到本地返回了文件名。然后通过下载文件接口传入文件名直接从本地文件读取并下载。
这里有个坑就是后台接口一定要支持跨域否则上传和编辑图片时会出错。如果你能保证两个服务通过同一个域名提供也可以省去这步。
相关代码：
