Ionic3多图上传至PHP后端失败：图片未送达服务器求助

嘿，我来帮你搞定这个图片上传的坑！先拆解下你代码里的几个核心问题，再给你一套能跑通的方案：

1. 你当前代码的问题点 #

• FormData传值方式错了：你直接把Base64字符串塞给FormData的photo字段，PHP后端根本识别不了这是文件——FormData上传文件必须传Blob或File对象，不是纯字符串。
• 循环单图上传效率太低：你现在每张图单独发一次POST请求，不仅慢，后端处理起来也麻烦，应该把所有图片打包到一个FormData里一次性发送。
• Base64前缀没处理：base64.encodeFile返回的字符串一般带data:image/jpeg;base64,这种前缀，必须去掉才能转成有效的Blob。

2. 修复后的Ionic前端代码 #

async testfile() {
  const formData = new FormData();

  for (const imgPath of this.images) {
    if (imgPath !== 'K' && imgPath !== 'O') {
      try {
        // 获取Base64并移除前缀
        const base64Str = await this.base64.encodeFile(imgPath);
        const pureBase64 = base64Str.replace(/^data:image\/(png|jpeg|jpg);base64,/, '');
        
        // 把Base64转成Blob对象
        const imgBlob = this.base64ToBlob(pureBase64, 'image/jpeg');
        
        // 用photo[]作为字段名，方便PHP接收成数组；第三个参数是文件名
        formData.append('photo[]', imgBlob, `upload-${Date.now()}.jpg`);
      } catch (err) {
        this.presentToast('图片处理失败');
        console.error('处理出错：', err);
      }
    }
  }

  // 确认有图片再发送请求
  if (formData.has('photo[]')) {
    this.http.post('你的API接口地址', formData, {responseType: 'text'})
      .subscribe(
        res => alert('上传成功！后端返回：' + res),
        err => {
          this.presentToast('上传失败，请检查网络或后端');
          console.error('上传出错：', err);
        }
      );
  } else {
    this.presentToast('请选择有效的图片哦');
  }
}

// 辅助工具：把Base64转成Blob
private base64ToBlob(base64Data: string, contentType: string): Blob {
  const byteChars = atob(base64Data);
  const byteArrays = [];

  for (let offset = 0; offset < byteChars.length; offset += 512) {
    const slice = byteChars.slice(offset, offset + 512);
    const byteNums = new Array(slice.length);
    
    for (let i = 0; i < slice.length; i++) {
      byteNums[i] = slice.charCodeAt(i);
    }
    
    const byteArray = new Uint8Array(byteNums);
    byteArrays.push(byteArray);
  }

  return new Blob(byteArrays, {type: contentType});
}

3. 对应的PHP后端接收代码 #

<?php
// 先处理跨域（如果前后端不同域名的话）
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST");
header("Access-Control-Allow-Headers: Content-Type");

// 上传目录，确保存在且有写入权限
$uploadDir = './uploads/';
if (!is_dir($uploadDir)) {
  mkdir($uploadDir, 0777, true);
}

$result = [];

// 接收前端传来的图片数组
if (isset($_FILES['photo'])) {
  foreach ($_FILES['photo']['tmp_name'] as $key => $tmpPath) {
    $origName = $_FILES['photo']['name'][$key];
    $tmpName = $_FILES['photo']['tmp_name'][$key];
    $fileError = $_FILES['photo']['error'][$key];
    $fileType = $_FILES['photo']['type'][$key];

    // 验证文件类型（可选，根据你的需求调整）
    $allowedTypes = ['image/jpeg', 'image/png', 'image/jpg'];
    if (in_array($fileType, $allowedTypes) && $fileError === 0) {
      // 生成唯一文件名，避免覆盖
      $newFileName = uniqid('', true) . '.' . pathinfo($origName, PATHINFO_EXTENSION);
      $savePath = $uploadDir . $newFileName;
      
      if (move_uploaded_file($tmpName, $savePath)) {
        $result[] = "文件 {$origName} 上传成功，存储路径：{$savePath}";
      } else {
        $result[] = "文件 {$origName} 上传失败，无法移动到存储目录";
      }
    } else {
      $result[] = "文件 {$origName} 不符合要求或上传出错";
    }
  }
} else {
  $result[] = "未接收到任何图片文件";
}

echo json_encode($result);
?>

4. 几个必注意的细节 #

• 目录权限：PHP的上传目录./uploads/一定要给写入权限（比如执行chmod 777 uploads/），不然会上传失败。
• 文件大小限制：如果上传大图片，要修改php.ini里的upload_max_filesize和post_max_size参数，比如改成upload_max_filesize = 20M、post_max_size = 25M。
• 跨域问题：如果前后端域名不一样，后端必须加跨域头，不然浏览器会拦截请求。

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