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

【问题标题】：return error after convert file Input to Base 64将文件输入转换为 Base 64 后返回错误
【发布时间】：2019-07-19 20:25:17
【问题描述】：

根据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 Uncaught TypeError: Cannot read property 'then' of 未定义 在 UploadFileAndGetUrl (doctors.js:14949) 在 HTMLButtonElement。 (医生.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) 在调用任务（zone.js:1540）在 HTMLButtonElement.globalZoneAwareCallback (zone.js:1566)

之前

医生.js:14992 数据：图像/png；base64，iVBORw0KGgoAAAANSUhEUgAAAyAAAAH0CAMAAADynrlKAAACBFBMVEUAzG9U1pBn2Zskz3vV8+H////g9umH4K71/Pjr+fHJ8Nm97dE/04aj5sCW47d43aSw6sg1143j+e801owDzXHS9ubQ9uRm4 医生.js:14993

之后

我该如何解决这个错误？

【问题讨论】：

你的函数没有返回一个承诺，所以你不能在它上面调用.then()，

标签： javascript angular

【解决方案1】：

zone.js:192 Uncaught TypeError: Cannot read property 'then' of undefined at

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

【讨论】：

【解决方案2】：

函数中没有returned 值，请参阅Why is value undefined at .then() chained to Promise??。

FileReaderload 事件是异步的，不能从事件处理程序中returned 值。您可以使用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))

【讨论】：