ueditor跨域上传远程图片文件

ueditor上传远程图片，也就是复制了一个网络图片，然后粘贴到ueditor工作区后形成的一个上传动作。那么如果页面和接口都在同一个域名下面，那么上传也就简单多了，使用默认上传动作就可以。

如果接口和uediotr页面不在同一个域名下面，就涉及到了一个跨域的动作，因为ueditor的单图上传使用的是表单加iframe回调的这么一个方式，所以ueditor没有提供解决方法，也就是说让我们使用多图的post上传方式来代替单图上传。

多图上传使用的是post请求上传的方式，所以我们在服务器接口部分设置允许跨域就和同域名下的效果一样。

那么上传远程图片，也就是抓取远程图片的时候，使用的上传方式就是jsonp的方式上传，虽然返回的数据都是一样的，但是在返回的结构上要支持jsonp的格式，显然也是一个get请求。

下面是使用koa来接收ueditor抓取远程图片的接口。

// action是用来判断ueditor上传的动作，这里默认是catchimage
let {action, callback} = ctx.request.query

// get请求的参数
let query = ctx.request.query

// 远程图片列表，一个图片默认是一个字符串，这里需要处理一下
let imgUrlList = query['source[]']
let newImageUrlList = []
newImageUrlList = newImageUrlList.concat(imgUrlList)
let list = []
for (let i = 0; i < newImageUrlList.length; i++) {
    let imgUrl = newImageUrlList[i]

    // 这里的downloadFile和writeUpload表示先下载，再上传到我们的存储的这么一个动作
    let fileInfo = await downloadFile(imgUrl)
    let newFilename = await writeUpload(fileInfo.path, fileInfo.extname)
    
    // ueditor处理catchimage的返回结果
    list.push({
        url: `${newFilename}`,
        source: imgUrl,
        state: 'SUCCESS'
    })
}
let result = JSON.stringify({
    "state": "SUCCESS",
    "list": list
})
// 返回支持jsonp格式 callback('返回的字符串')
ctx.body = `${callback}(${result})`