如何解决如何在CK编辑器中接收上载图像的URL并将其传递给“ src”属性?
使用Base64 image upload adapter,CKEditor显然将图像编码为Base64格式,并将结果插入为<img src="data:image/png;base64,code... >
。代码可能很长;我要上传图片网址。
在我的应用程序中,我需要以下功能:
- 将图像转换为Base64。我知道基本上该怎么做:
async function encodeSingleFileTo64base(targetFile: File): Promise<string> {
const fileReader: FileReader = new FileReader();
fileReader.readAsDataURL(targetFile);
return new Promise<string>((resolve: (encodedFile: string) => void,reject: (error: Error) => void): void => {
fileReader.onload = (filedHasBeenReadEvent: ProgressEvent<FileReader>): void => {
if (filedHasBeenReadEvent.target === null || filedHasBeenReadEvent.target.result === null) {
reject(new Error("Failed to encode the image file."));
return;
}
resolve(String(filedHasBeenReadEvent.target.result));
};
});
}
- 通过GraphQL提交Base64代码。我基本上可以做到:
import AWSAmplifyAPI,{ graphqlOperation,GraphQLResult } from "@aws-amplify/api";
async function uploadPhotoAndGetURL(photoBase64: string): Promise<string> {
return (await AWSAmplifyAPI.graphql(graphqlOperation(
`mutation($photoBase64: String!) { uploadPhoto(photoBase64: $photoBase64) }`,{ photoBase64 }
))).uploadPhoto;
}
- 进行CK编辑器,将从响应URL接收的内容添加到
src=""
(这是当前问题的主题)。
这是documentation中的解决方案模板:
class MyUploadAdapter {
constructor( loader ) {
this.loader = loader;
}
upload() {
return loader.file
.then( file => server.upload( file ) );
}
abort() {
server.abortUpload();
}
}
第一个问题:如何在upload()方法中链接两个异步函数?
编码和数据提交都是异步操作。
我一直很困惑如何与loader.file.then()
兼容。
第二个问题:如何将收到的URL传递给CK编辑器?
我不能不从建议的解决方案模板中脱颖而出,如何接收上传的图像URL并将其传递给src
属性。
解决方法
第一个问题:如何在upload()方法中链接两个异步函数?
从这里:https://thoughtbot.com/blog/chaining-events-like-a-boss
示例:
const timeUserRequest = async () => {
const before = await getCurrentTimeAsync()
await getUserDataViaHttp()
const after = await getCurrentTimeAsync()
return (after - before)
};
第二个问题:如何将收到的URL传递给CK编辑器?
您如何提出要求?您看到这个例子了吗?
class MyUploadAdapter {
// ...
// Initializes XMLHttpRequest listeners.
_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;
// This example assumes the XHR server's "response" object will come with
// an "error" which has its own "message" that can be passed to reject()
// in the upload promise.
//
// Your integration may handle upload errors in a different way so make sure
// it is done properly. The reject() function must be called when the upload fails.
if ( !response || response.error ) {
return reject( response && response.error ? response.error.message : genericErrorText );
}
// If the upload is successful,resolve the upload promise with an object containing
// at least the "default" URL,pointing to the image on the server.
// This URL will be used to display the image in the content. Learn more in the
// UploadAdapter#upload documentation.
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 => {
if ( evt.lengthComputable ) {
loader.uploadTotal = evt.total;
loader.uploaded = evt.loaded;
}
} );
}
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。