class MyUploadAdaper {
constructor(loader) {
this.loader = loader
}
_sendRequest( file ) {
const data = new FormData();
data.append( 'file', file );
this.xhr.send( data );
}
_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
} );
} );
// Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded
// properties which are used e.g. to display the upload progress bar in the editor
// user interface.
if ( xhr.upload ) {
xhr.upload.addEventListener( 'progress', evt => {
console.log("progress");
if ( evt.lengthComputable ) {
loader.uploadTotal = evt.total;
loader.uploaded = evt.loaded;
}
console.log(loader.uploaded+"/"+loader.uploadTotal);
} );
}
}
_initRequest() {
const xhr = this.xhr = new XMLHttpRequest();
xhr.open( 'POST', '/admin/upload', true );
xhr.responseType = 'json';
}
upload() {
return this.loader.file
.then( file => new Promise( ( resolve, reject ) => {
this._initRequest();
this._initListeners( resolve, reject, file );
this._sendRequest( file );
} ) );
}
abort() {
if ( this.xhr ) {
this.xhr.abort();
}
}
}
...
...
ClassicEditor
.create( document.querySelector( "#editor" ), {
language: 'zh-cn',
} )
.then(editor => {
console.log(editor)
this.editor = editor;
editor.plugins.get('FileRepository').createUploadAdapter = ( loader ) => {
return new MyUploadAdaper(loader);
};
})
.catch( error => {
console.error( error );
} );
ckedit5 自定义上传图片
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
- 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
推荐阅读更多精彩内容
- 最近公司在做一个ios端的日记App,需要我写一个后台管理,需要支持图文混排功能,然后对比了一下市面上比较主流的富...
- 在web开发中,上传文件功能通过type为file的input标签即可实现。但input的显示效果仅为一个按钮,且...
- 随手笔记,这里我仅仅只是满足需求而封装的,如需使用还需要改进,这里只记一下方法。 在utils.js里封装打文字水...
- vue-quill-editor 默认的是以base64保存图片,会直接把图片base64和内容文本一同以字符串的...