使用Axios传递图片Data URL至API时后端接收为空的问题排查

核心原因 #

你遇到的问题是FileReader的onload是异步回调函数，代码执行顺序出错：

• 循环中启动FileReader读取文件，但reader.onload回调要等文件读取完成后才会执行
• 你在循环结束后立刻调用uploadImage(images.value)，此时所有reader.onload还未执行，images.value仍是空数组
• 控制台打印的Proxy数组看似有值，是因为Vue响应式代理会在控制台实时更新显示，但实际调用uploadImage时数组是空的

修复方案 #

需等待所有文件读取操作完成后，再调用上传函数。可以用Promise.all统一处理所有异步读取任务：

修复后的handleFileUpload代码 #

let images = ref([]);

const handleFileUpload = async (event) => {
  const files = event.target.files;
  // 收集所有文件读取的Promise
  const readPromises = Array.from(files).map(file => {
    return new Promise((resolve) => {
      const reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        resolve(reader.result);
      };
    });
  });

  // 等待所有文件读取完成，将结果存入images数组
  images.value = await Promise.all(readPromises);
  // 此时调用上传函数，数组已包含所有Data URL
  await uploadImage(images.value);
};

可选优化：直接用FormData上传文件（更高效） #

Data URL体积比原文件大30%左右，上传图片更推荐直接用FormData传递文件对象，避免转码：

const handleFileUpload = (event) => {
  const files = event.target.files;
  const formData = new FormData();
  // 批量添加文件到FormData
  Array.from(files).forEach(file => {
    formData.append('images[]', file);
  });

  uploadImage(formData);
};

const uploadImage = (formData) => {
  return api.post('image-upload.php', formData, {
    headers: {
      'Content-Type': 'multipart/form-data' // 必须设置该请求头
    }
  });
};

此时PHP后端可通过$_FILES['images']获取上传的文件列表。

内容的提问来源于stack exchange，提问作者Mikael Tenshio