迭代处理图片输入转DataURL时pictureURL为空如何解决

问题根源 #

• FileReader的readAsDataURL是异步操作，执行toPush.push时reader.onload还未触发，pictureURL还未被赋值，所以出现空值
• 原代码用var声明循环变量，存在变量提升问题，等onload回调触发时循环已经执行完毕，所有回调拿到的都是最后一次循环的reader实例，就算赋值也会覆盖之前的结果

可行解决方案 #

第一步：封装FileReader为Promise方法 #

// 封装异步读取文件为DataURL的通用方法
function readFileToDataURL(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.onload = () => resolve(reader.result);
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

第二步：改写循环逻辑，异步等待所有文件读取完成 #

async function getFormData() {
  const toPush = [];
  // 用let声明循环变量，规避变量提升问题
  for(let i = 1; i <= myVariable; i++){
    const variable1 = document.getElementById('q' + i).value;
    const var2 = document.getElementById(i + 'x').value;
    const var3 = document.getElementById(i + 'y').value;
    const var4 = document.getElementById(i + 'z').value;
    const var5 = document.getElementById(i + 'd1').value;
    const twofour = [var2, var3, var4, var5];
    const fileInput = document.getElementById("fileup" + i);
    // 读取当前循环对应的图片文件，无文件时默认赋值为空字符串
    const pictureURL = fileInput.files[0] ? await readFileToDataURL(fileInput.files[0]) : '';
    // 确认所有字段值都到位后再push入数组
    toPush.push({
      variable1: variable1,
      twofour: twofour,
      pictureURL: pictureURL
    });
  }
  // 此处返回的toPush就是携带完整pictureURL的数组，可直接用于后续入库、预览渲染
  return toPush;
}

// 调用示例（异步方法需要用then或者放在其他async函数内调用）
getFormData().then(finalList => {
  // 在这里执行你的入库、预览等业务逻辑
  console.log(finalList);
}).catch(err => {
  console.log('文件读取失败：', err);
});

补充优化方案 #

如果需要并行读取所有文件提升处理速度，可以把所有读取任务打包为Promise数组，用Promise.all一次性等待执行完成：

async function getFormDataParallel() {
  const promiseList = [];
  for(let i = 1; i <= myVariable; i++){
    const variable1 = document.getElementById('q' + i).value;
    const var2 = document.getElementById(i + 'x').value;
    const var3 = document.getElementById(i + 'y').value;
    const var4 = document.getElementById(i + 'z').value;
    const var5 = document.getElementById(i + 'd1').value;
    const twofour = [var2, var3, var4, var5];
    const fileInput = document.getElementById("fileup" + i);
    const fileReadPromise = fileInput.files[0] ? readFileToDataURL(fileInput.files[0]) : Promise.resolve('');
    // 将每个条目的读取组装逻辑封装为Promise推入数组
    promiseList.push(fileReadPromise.then(pictureURL => {
      return { variable1, twofour, pictureURL }
    }));
  }
  // 并行等待所有读取任务完成
  return Promise.all(promiseList);
}

内容的提问来源于stack exchange，提问作者Elbion Redenica