如何接收上传图片的 URL 并将其传递给 CK Editor 中的“src”属性？

Question

使用Base64 图片上传适配器，CKEditor 显然将图片编码为 Base64 格式，并将结果插入为<img src="data:image/png;base64, code... >. 代码可能很长；我想要上传的图片 URL。

在我的应用程序中，我需要以下功能：

1. 将图像转换为 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 Editor 添加从响应 URL 接收到的src=""（这是当前问题的主题）。

这是文档中的解决方案模板：

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属性。

Answer 1

第一个问题：如何在 upload() 方法中链接两个异步函数？从这里：https ://thoughtbot.com/blog/chaining-events-like-a-boss例子：const timeUserRequest = async () => {&nbsp; const before = await getCurrentTimeAsync()&nbsp; await getUserDataViaHttp()&nbsp; const after = await getCurrentTimeAsync()&nbsp; return (after - before)};第二个问题：如何将收到的 URL 传递给 CK 编辑器？你是如何提出你的要求的？你看到这个例子了吗？class MyUploadAdapter {&nbsp; &nbsp; // ...&nbsp; &nbsp; // Initializes XMLHttpRequest listeners.&nbsp; &nbsp; _initListeners( resolve, reject, file ) {&nbsp; &nbsp; &nbsp; &nbsp; const xhr = this.xhr;&nbsp; &nbsp; &nbsp; &nbsp; const loader = this.loader;&nbsp; &nbsp; &nbsp; &nbsp; const genericErrorText = `Couldn't upload file: ${ file.name }.`;&nbsp; &nbsp; &nbsp; &nbsp; xhr.addEventListener( 'error', () => reject( genericErrorText ) );&nbsp; &nbsp; &nbsp; &nbsp; xhr.addEventListener( 'abort', () => reject() );&nbsp; &nbsp; &nbsp; &nbsp; xhr.addEventListener( 'load', () => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; const response = xhr.response;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // This example assumes the XHR server's "response" object will come with&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // an "error" which has its own "message" that can be passed to reject()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // in the upload promise.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Your integration may handle upload errors in a different way so make sure&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // it is done properly. The reject() function must be called when the upload fails.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( !response || response.error ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; return reject( response && response.error ? response.error.message : genericErrorText );&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // If the upload is successful, resolve the upload promise with an object containing&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // at least the "default" URL, pointing to the image on the server.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // This URL will be used to display the image in the content. Learn more in the&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // UploadAdapter#upload documentation.&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; resolve( {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; default: response.url&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; // Upload progress when it is supported. The file loader has the #uploadTotal and #uploaded&nbsp; &nbsp; &nbsp; &nbsp; // properties which are used e.g. to display the upload progress bar in the editor&nbsp; &nbsp; &nbsp; &nbsp; // user interface.&nbsp; &nbsp; &nbsp; &nbsp; if ( xhr.upload ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; xhr.upload.addEventListener( 'progress', evt => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if ( evt.lengthComputable ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader.uploadTotal = evt.total;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loader.uploaded = evt.loaded;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } );&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }}