Return 调用在回调中的 return 语句之前到达

Question

我正在尝试向 react-draft-wysiwyg 编辑器添加图片上传功能。

根据编辑器文档，

image: uploadCallback: This is image upload callBack. It should return a promise that resolves to give image src. Default value is true. Both above options of uploadEnabled and uploadCallback should be present for upload to be enabled. Promise should resolve to return an object { data: { link: <THE_URL>}}.

来源：https://jpuri.github.io/react-draft-wysiwyg/#/docs

我面临的问题是，在将图像上传到 firebase 和结果 url 时，我试图用它来创建此对象以从此回调中返回。

在这里，在代码中，首先使用 firebase 的 uploadBytes 方法上传图像，然后使用 getDownloadURL，我们获取文件的 url。有一个错误，未定义的对象 url link 正在从回调中返回。

      const uploadImageCallBack = (file) => {



let linkImg = "";
let arr = [];
const saveImagePromise = new Promise((resolve, reject) => {
  const fileNameParts = file.name.split(".");
  const storage = getStorage(app);
  const storageRef = ref(
    storage,
    "Random/" +
     title +
      "/editorImage." +
      uuidv4() +
      fileNameParts[fileNameParts.length - 1]
  );
  debugger;
  const metadata = {
    contentType: file.type,
  };
  try {
    const uploadTask = uploadBytes(storageRef, file, metadata);
    debugger;
    uploadTask.then((snapshot) => {
      debugger;
      const downloadURLPromise = getDownloadURL(storageRef);
      downloadURLPromise.then((url) => {
        linkImg = url;
        debugger;
      });
      arr.push(downloadURLPromise);
    });
    arr.push(uploadTask);
  } catch (error) {
    console.log(error);
    reject(error);
  }
});
arr.push(uploadBytes, saveImagePromise);
console.log(Infinity);
Promise.all(arr).then((res) => {
  console.log(res);
  console.log(Infinity);
  return new Promise((resolve, reject) => {
    resolve({ data: { link: linkImg } });
  });
});

};

编辑器的代码是

                    <Editor
                      toolbar={{
                        inline: { inDropdown: true },
                        list: { inDropdown: true },
                        textAlign: { inDropdown: true },
                        link: { inDropdown: true },
                        history: { inDropdown: true },

                        image: {
                          urlEnabled: true,
                          uploadEnabled: true,
                          alignmentEnabled: true,
                          uploadCallback: uploadImageCallBack,
                          previewImage: true,
                          inputAccept:
                            "image/gif,image/jpeg,image/jpg,image/png,image/svg",
                          alt: { present: true, mandatory: false },
                          defaultSize: {
                            height: "auto",
                            width: "auto",
                          },
                        },
                      }}
                      onContentStateChange={(data) => {
                        let res = convertToPlain(draftToHtml(data));
                       console.log(data);
                        
                        setReasonProgress(
                          remainigchar >= 100 ? 100 : remainigchar
                        );
                      }}
                      wrapperClassName="wrapper-class"
                      editorClassName="editor-class"
                      toolbarClassName="toolbar-class"
                    />```

Please help me to create a correct return statement.

Answer 1

我通过使用异步函数并为 url 添加等待语句解决了这个问题。

const uploadImageCallBack = async (file) => {
    const fileNameParts = file.name.split(".");
    const storage = getStorage(app);
    const storageRef = ref(
      storage,
     
        uuidv4() +
        fileNameParts[fileNameParts.length - 1]
    );
    let imageObject = {
      file: file,
      localSrc: URL.createObjectURL(file),
    };
    const metadata = {
      contentType: file.type,
    };

    const snapshot = await uploadBytes(storageRef, file, metadata);
    const url = await getDownloadURL(storageRef);
    console.log(url, snapshot);
    return new Promise((resolve, reject) => {
      resolve({ data: { link: url } });
    });
  };

Return 调用在回调中的 return 语句之前到达

Return call reached before return statement in callback

javascript

callback

reactjs

draftjs

react-draft-wysiwyg