亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何接收上傳圖片的 URL 并將其傳遞給 CK Editor 中的“src”屬性?

如何接收上傳圖片的 URL 并將其傳遞給 CK Editor 中的“src”屬性?

慕森卡 2022-12-29 14:01:27
使用Base64 圖片上傳適配器,CKEditor 顯然將圖片編碼為 Base64 格式,并將結果插入為<img src="data:image/png;base64, code... >. 代碼可能很長;我想要上傳的圖片 URL。在我的應用程序中,我需要以下功能:將圖像轉換為 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屬性。
查看完整描述

1 回答

?
呼啦一陣風

TA貢獻1802條經驗 獲得超6個贊

第一個問題:如何在 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;

                }

            } );

        }

    }

}


查看完整回答
反對 回復 2022-12-29
  • 1 回答
  • 0 關注
  • 109 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號