javascript - FileReader 返回未定义

Question

我尝试在我的网站中使用 FileReader()，但它在数组中返回未定义。这是我第一次使用 FileReader 从输入文件发送编码数据。我正在使用 Recruiterbox 的 API，正如您在打印中看到的，encoded_data 未定义。我被困在这里，需要一些帮助。

 applyOpening: function applyOpening() {
    let fields = [];
    let formControl = document.querySelectorAll('.form-control');

    for (var i = 0; i < formControl.length; i++) {
      let field = formControl[i];
      let obj = {
        key: field.getAttribute('name')
      }

      if (field.tagName.toLowerCase() === 'input' && field.getAttribute('type') === 'file' ) {
        obj.value = {
          'encoded_data': getBase64(field.files[0]),
          'file_name': field.value
        }
      } else {
        obj.value = field.value
      }
      fields.push(obj);
    }

    function getBase64(file) {
      let reader = new FileReader();

      if (file) {
        return reader.readAsDataURL(file);
      } else {
        return false;
      }
      reader.onloadend = function() {
        return reader.result;
      };
    }

    $.ajax({
      url: 'https://jsapi.recruiterbox.com/v1/openings/' + id + '/apply?client_name=clientname',
      data: JSON.stringify({ fields: fields }),
      dataType: 'json',
      contentType: 'application/json',
      type: 'POST',
      success: function(response) {
        console.log(JSON.stringify(data));
      },
      error: function(er) {
        console.error(er);
      }
    });
  }

更新:

applyOpening: function applyOpening() {

    function getBase64(file) {
      return new Promise(function(resolve) {
        var reader = new FileReader();
        reader.onloadend = function() {
          resolve(reader);
        }
        reader.readAsDataURL(file);
      })
    }

    let fields = [];
    let formControl = document.querySelectorAll('.form-control');

    for (var i = 0; i < formControl.length; i++) {

      let field = formControl[i];

      let obj = {
        key: field.getAttribute('name')
      }

      if (field.tagName.toLowerCase() === 'input' && field.getAttribute('type') === 'file' ) {
        if (field.files[0]) {
          getBase64(field.files[0]).then(function(reader) {
              obj.value = {
                'encoded_data': reader.result,
                'file_name': field.value.replace("C:\\fakepath\\", "")
              };
          });
        }
      } else {
        obj.value = field.value;
      }
      if (obj.key !== null) {
        fields.push(obj);
      }
      console.log(obj);
    }

    app.postApplyOpening(fields);

控制台日志:

请求有效负载:

更新2:

applyOpening: async function applyOpening() {

  function getBase64(file) {
    return new Promise(function(resolve) {
      var reader = new FileReader();
      reader.onloadend = function() {
        resolve(reader);
      }
      reader.readAsDataURL(file);
    })
  }

  let fields = [];
  let formControl = document.querySelectorAll('.form-control');

  for (var i = 0; i < formControl.length; i++) {

  let field = formControl[i];

  let obj = {
    key: field.getAttribute('name')
  }

  if (field.tagName.toLowerCase() === 'input' && field.getAttribute('type') === 'file' ) {
    if (field.files[0]) {
      let reader = await getBase64(field.files[0]);
      obj.value = {
        'encoded_data': reader.result.replace(new RegExp("^data:[A-Z]+/[A-Z]+;base64,", "gi"), ''),
        'file_name': field.value.replace("C:\\fakepath\\", "")
      };
    }
  } else {
    obj.value = field.value;
  }
  if (obj.key !== null) {
    fields.push(obj);
  }
  console.log(obj);
}

app.postApplyOpening(fields);
},

Answer 1

FileReader 异步返回结果。使用 Promise 异步获取结果。您无法返回 readAsDataURL 的结果，即未定义的结果，这就是您所看到的。

请参见此处:Javascript base64 encoding function returns undefined