React集成TinyMCE（三）上传图片

完成上一步之后我们的控件插入图片时只能简单地插入远程的图片，还不能支持图片上传。下面我们就来开启图片上传功能。

第一步在初始化空间时加入图片上传事件阻拦器：

//定以后就会有上传功能，入选择文件后就会激活这个方法，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} 是下载文件接口。上传文件时假如成功会返回上传文件的文件名。我的测试代码就直接把文件保存到本地返回了文件名。而后通过下载文件接口传入文件名直接从本地文件读取并下载。

这里有个坑就是后端接口肯定要支持跨域否则上传和编辑图片时会出错。假如你能保证两个服务通过同一个域名提供也可以省去这步。

相关代码：

前台完整项目

后端服务代码