PHP通过cURL调用Trello API上传卡片附件内容异常问题咨询

问题根因 #

• 前端JS存在变量名笔误：声明存储文件列表的变量为files，但循环遍历使用了未定义的myFiles，会导致前端无法正常提交文件数据
• PHP端variety()为拼写错误，实际应为array()
• 核心错误：上传二进制文件时使用http_build_query()处理请求参数，该函数会将所有参数转为URL编码字符串，导致file字段仅上传了临时文件路径的文本内容，而非实际文件二进制流
• PHP 5.5+版本使用cURL上传文件必须通过CURLFile类处理文件对象，不能直接传入临时文件路径

修正后代码 #

前端JS代码 #

// 注意原DOM id存在空格，建议调整为不含空格的命名如trello-attachment避免异常
var files = document.getElementById('Trello attachment').files;
var formData = new FormData();

// 修正变量名错误
for (i = 0; i < files.length; i++) {
  formData.append('file[]', files[i]);
}
var ajax = new XMLHttpRequest();
ajax.open('POST', 'assets/php/ajaxResponse.php');
ajax.send(formData);

后端PHP代码 #

if (!empty($_FILES)) {
    $trelloKey = '你的实际Trello Key';
    $trelloToken = '你的实际Trello Token';
    $cardId = 'tQxhxRJO';
    $apiUrl = "https://api.trello.com/1/cards/{$cardId}/attachments?key={$trelloKey}&token={$trelloToken}";

    for ($i = 0; $i < count($_FILES['file']['name']); $i++) {
        $tmpPath = $_FILES['file']['tmp_name'][$i];
        $fileName = $_FILES['file']['name'][$i];
        $fileMime = $_FILES['file']['type'][$i];
        
        // 使用CURLFile处理待上传的文件
        $file = new CURLFile($tmpPath, $fileMime, $fileName);
        
        $postData = [
            'name' => $fileName,
            'file' => $file
        ];

        $chAttachment = curl_init();
        curl_setopt($chAttachment, CURLOPT_URL, $apiUrl);
        // 声明为POST请求
        curl_setopt($chAttachment, CURLOPT_POST, true);
        // 直接传数组，cURL会自动设置multipart/form-data格式的请求头和参数
        curl_setopt($chAttachment, CURLOPT_POSTFIELDS, $postData);
        curl_setopt($chAttachment, CURLOPT_RETURNTRANSFER, 1);
        // 如遇SSL证书校验问题可临时开启下面两行配置
        // curl_setopt($chAttachment, CURLOPT_SSL_VERIFYPEER, false);
        // curl_setopt($chAttachment, CURLOPT_SSL_VERIFYHOST, false);
        $result = curl_exec($chAttachment);
        curl_close($chAttachment);
        print_r($result);
    }
}

注意事项 #

• 请替换代码中的你的实际Trello Key、你的实际Trello Token为你申请的有效接口凭证
• Trello免费版单附件大小限制为10MB，超出大小会被接口拒绝
• 建议调整DOM元素id为不含空格的命名，避免不同浏览器的兼容性问题

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