Question

根据How to convert the file to base64 in JavaScript?，我找到了一种方法，可以根据以下方法在javascript中将图像转换为base64：

//My Converter Function
        function getBase64(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
            console.log("befor");
            console.log(reader.result);
            console.log("after");
        };
        reader.onerror = function (error) {
            console.log('Error: ', error);
        };
    }

我通过以下方式使用它：

getBase64(file).then(
    data => (Image64bit = data)

似乎我有64位字符串，但是每次都会返回此错误：（请注意，如果没有“ then”，它将不会返回任何内容）

zone.js：192未捕获的TypeError：无法读取以下内容的属性“ then”   未定义       在UploadFileAndGetUrl（doctors.js：14949）       在HTMLButtonElement。（doctors.js：14703）       在ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invokeTask   （zone.js：421）       在Zone.push ../ node_modules / zone.js / dist / zone.js.Zone.runTask（zone.js：188）       在ZoneTask.push ../ node_modules / zone.js / dist / zone.js.ZoneTask.invokeTask中   [作为调用]（zone.js：496）       在invokeTask（zone.js：1540）上       在HTMLButtonElement.globalZoneAwareCallback（zone.js：1566）

之前

doctors.js：14992   数据：图像/ png; base64，iVBORw0KGgoAAAANSUhEUgAAAyAAAAH0CAMAAADynrlKAAACBFBMVEUAzG9U1pBn2Zskz3vV8 + H ///// g9umH4K71 / Pjr + fHJ8Nm97dE / 04aj5sCW47d43zX9W。   doctors.js：14993

之后

如何解决此错误？

Answer 1

zone.js：192未捕获的TypeError：无法读取
中未定义的属性'then'

函数getBase64不返回Promise。

您需要更正getBase64，使其返回Promise，并在reader.onload内部用reader.result的值进行解析：

function getBase64(file) {
  return new Promise(resolve, reject) => {
    var reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function () {
      console.log("befor");
      console.log(reader.result);
      console.log("after");
      resolve(reader.result);
    };
    reader.onerror = function (error) {
      console.log('Error: ', error);
      reject(error);
    };
  }
}

Answer 2

该函数没有return的值，请参见Why is value undefined at .then() chained to Promise?？。

FileReader load事件是异步的，无法从事件处理程序中return赋值。您可以使用Promise或async/await来解析一个Promise，其中可以通过链接的.then()访问该值，而将.catch()链接到一个句柄错误。

  function getBase64(file) {
    return new Promise((resolve, reject) => {
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function () {
        console.log(reader.result);
        resolve(result);
      };
      reader.onerror = function (error) {
        console.log('Error: ', error);
        reject(error);
      };
    });
  }

  getBase64(file).then(
    data => {  
      // do stuff with data
  })
  // handle error
  .catch(err => console.error(err))

将文件输入转换为Base 64后返回错误

2 个答案: