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

Question

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

Answer 1

First problem: how to chain two async functions in upload() method?

从这里: 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)
};

Second problem: how to pass recieved URL to CK editor?

你是如何提出你的要求的？你看到这个例子了吗？

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;
                }
            } );
        }
    }
}