我使用自己的UploadAdapter在CKEditor 5中上传img。 像the official guideline说明一样,实现方法上传如下。
upload() {
const data = new FormData();
data.append('file', this.loader.file);
data.append('token', this.token);
data.append('key', guid() + '.jpg');
return new Promise((resolve, reject) => {
axios({
url: '{my server url}',
method: 'post',
data,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded'
},
withCredentials: false
}).then(res => {
var resData = eval("("+res.data+")");
resData.url = 'my own domain' + resData.url;
resolve(resData);
}).catch(error => {
reject(error)
});
});
}
我的服务器响应如下:{上传:true 网址:“ ***。jpg”} 并且上面的代码运行良好。 CKEditor可以得到响应。我可以在编辑器中看到img:
但是,查看img html代码不是我的期望,它的src属性具有base64,否则我给定的url参数:
<img src="data:image/jpeg;base64,/9j/4*********">
答案 0 :(得分:2)
upload() {
const data = new FormData();
data.append('file', this.loader.file);
data.append('token', this.token);
data.append('key', guid() + '.jpg');
return new Promise((resolve, reject) => {
axios({
url: '{my server url}',
method: 'post',
data,
headers: {
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'application/x-www-form-urlencoded'
},
withCredentials: false
}).then(res => {
var resData = res.data;
resData.default = resData.url; <----------- https://ckeditor.com/docs/ckeditor5/latest/api/module_upload_filerepository-UploadAdapter.html#function-upload
resolve(resData);
}).catch(error => {
reject(error)
});
});
}