JavaScript使用FileReader读取多文件时filedata返回空对象问题求助

• 传入Promise.all的数组元素是包含Promise属性的普通对象，而非Promise实例。Promise.all仅会处理数组层级的Promise，不会递归解析对象内部的Promise，导致你拿到的filedata始终是未resolve的Promise对象，JSON序列化后就会显示为空对象{}。
• 构建数组时未等待异步读取结果返回，直接把Promise实例作为属性值存入对象，自然无法拿到实际的base64文件内容。

仅需修改uploadForm函数逻辑即可，完整JS代码如下：

function readFile(file) {
  return new Promise(function(resolve, reject) {
    let fr = new FileReader();
    fr.onload = function() {
      resolve(fr.result);
    };
    fr.onerror = function() {
      reject(fr);
    };
    fr.readAsDataURL(file)
  });
}

// Handle multiple fileuploads
function uploadForm() {
  let files = $('#file')[0].files;
  let filePromises = [];
  if (!files.length) return;
  for (let i = 0; i < files.length; i++) {
    // 每个Promise完成后返回完整的文件对象
    const currentFile = files[i];
    const filePromise = readFile(currentFile).then(dataUrl => {
      return {
        filename: currentFile.name,
        filedata: dataUrl
      }
    });
    filePromises.push(filePromise);
  }
  Promise.all(filePromises).then((values) => {
    console.log(JSON.stringify(values, null, 2));
    // 此处可添加后续业务逻辑
  }).catch(err => {
    console.error('文件读取失败', err);
  });
}

function showMessage(e) {
  $('#progress').html(e);
  $('#file').val('');
}

修改后Promise.all会等待所有文件读取完成，最终输出的values数组完全符合你要求的格式，filedata字段会正确携带base64格式的文件内容。

内容的提问来源于stack exchange，提问作者Code Guy