我正在使用CKEDITOR5,希望能够允许用户上传图像。我正在使用官方网站上描述的定制上传适配器,但我不能使用XMLHttpRequest上传图像。每次我上传图像时,它都会出现以下错误: 在'https://xxxxxx“起源”http://xx.xx.xx.xx:xxxx'已被CORS策略阻止:对飞行前请求的响应未通过访问控制检查:请求的资源上不存在'access control Allow Origin'标头。我将图像传递到后端并成功上载到s3,后端返回一个正确的S3URL,我使用它作为xhr.open('POST',url,true)的url。以下是我定制的适配器的代码:
import axios from 'axios'
import { postAccessHeader, clearLocalStorage } from '../../common/publicFunc';
class MyUploadAdapter {
constructor( loader ) {
this.loader = loader;
this.url = '';
}
upload() {
return this.loader.file
.then( file => new Promise( ( resolve, reject ) => {
this._s3_upload_image( resolve, reject, file );
} ) );
}
abort() {
if ( this.xhr ) {
this.xhr.abort();
}
}
_initRequest( url ) {
const xhr = this.xhr = new XMLHttpRequest();
xhr.open( 'POST', url, true );
xhr.responseType = 'json';
}
_initListeners( resolve, reject, file ) {
const xhr = this.xhr;
const loader = this.loader;
const genericErrorText = `Couldn't upload file: ${ file.name }.`;
xhr.addEventListener( 'error', () => reject( genericErrorText ) );
xhr.addEventListener( 'abort', () => reject() );
xhr.addEventListener( 'load', () => {
const response = xhr.response;
if ( !response || response.error ) {
return reject( response && response.error ? response.error.message : genericErrorText );
}
resolve( {
default: response.url
} );
} );
if ( xhr.upload ) {
xhr.upload.addEventListener( 'progress', evt => {
if ( evt.lengthComputable ) {
loader.uploadTotal = evt.total;
loader.uploaded = evt.loaded;
}
} );
}
}
_sendRequest( file ) {
const data = new FormData();
data.append( 'upload', file );
this.xhr.send( data );
}
_s3_upload_image( resolve, reject, file ){
console.log(file)
const formData = new FormData();
formData.append( 'upload', file);
let payload = {"image": formData, "file": file, "test": "hi"}
console.log(payload)
let settings = postAccessHeader('/account/s3_upload_image', formData);
axios(settings)
.then(response => {
const code = response.status;
console.log(response)
if (code == 200) {
if (response.data.status) {
let url = response.data.url
this._initRequest( url );
this._initListeners( resolve, reject, file );
this._sendRequest( file );
} else {
if (response.data.AuthFailed) {
clearLocalStorage();
}
else {
}
}
} else {
alert("unable to upload image");
}
})
.catch(error => {
alert(error);
});
}
}
export default MyUploadAdapter
谢谢你的帮助
我一周前就经历过了。我建议使用CKEditor4 这在我的网站上工作。它将从URL自动嵌入视频和图像
使用
npm i ckeditor4-react
安装ckeditor4 react相关问题 更多 >
编程相关推荐