使用Adobe Pdf Embed API将带批注的PDF保存到服务器失败如何解决

问题汇总 #

前端问题 #

• 提交FormData的用法错误：$.post默认会自动序列化数据为表单键值对格式，且会自动设置请求头为application/x-www-form-urlencoded，而FormData需要保持原始格式、请求头设为multipart/form-data，直接传输会导致数据损坏，后端无法识别。
• 变量声明不规范：定义formData时没有加声明关键字，会变成全局变量，容易引发变量冲突。
• 冗余请求残留：原代码中还保留了向原作者测试接口的fetch请求，无需同时发送两个请求，直接替换为自己的接口地址即可。

后端问题 #

• 上传文件取值错误：通过FormData上传的文件数据不会存储在$_POST中，而是存储在$_FILES超全局变量中，用$_POST['pdfFile']完全无法获取到文件信息。
• move_uploaded_file参数错误：该方法的第二个参数必须是完整的目标文件路径，不能只传上传目录，否则会移动失败。

修复代码 #

前端修改 #

替换原回调函数内的fetch/$.post部分代码即可：

adobeDCView.registerCallback(
AdobeDC.View.Enum.CallbackType.SAVE_API,
function (metaData, content, options) {
    var uint8Array = new Uint8Array(content);
    var blob = new Blob([uint8Array], { type: 'application/pdf' });
    // 加const声明formData
    const formData = new FormData();
    var pdfFilename = urlToPDF.split("/").slice(-1)[0];
    pdfFilename = pdfFilename.split(".")[0] + "-" + uuidv4() + ".pdf";
    formData.append('pdfFile', blob, pdfFilename);

    // 直接用fetch请求你自己的后端接口，不需要额外加jQuery的$.post
    fetch("newfile.php", {
        method: 'POST',
        body: formData,
    })
    .then(function (response) {
        if (response.status == 200) {
            updateSaveUI(pdfFilename);
        }
    })
    .catch(err => console.error('上传失败：', err))

    return new Promise((resolve, reject) => {
        resolve({
            code: AdobeDC.View.Enum.ApiResponseCode.SUCCESS,
            data: {
                metaData: { fileName: urlToPDF.split("/").slice(-1)[0] }
            }
        });
    });
},
saveOptions
);

如果你一定要用jQuery提交，写法如下，不能使用简写的$.post：

$.ajax({
    url: 'newfile.php',
    type: 'POST',
    data: formData,
    processData: false, // 禁止jQuery序列化数据
    contentType: false, // 禁止jQuery自动设置请求头
    success: function(res) {
        updateSaveUI(pdfFilename);
    },
    error: function(err) {
        console.error('上传失败', err);
    }
})

后端PHP代码修改 #

require_once "conn.php";
// 从$_FILES获取文件信息
$fileInfo = $_FILES['pdfFile'];
$target_dir = "uploads/";
// 自动创建不存在的上传目录
if (!is_dir($target_dir)) {
    mkdir($target_dir, 0755, true);
}
// 拼接完整的目标文件路径
$target_path = $target_dir . basename($fileInfo['name']);
// 先判断上传是否出错
if ($fileInfo['error'] === UPLOAD_ERR_OK) {
    if (move_uploaded_file($fileInfo['tmp_name'], $target_path)) {
        http_response_code(200);
        echo "上传成功";
    } else {
        http_response_code(500);
        echo "文件移动失败，请检查目录权限";
    }
} else {
    http_response_code(400);
    echo "上传错误，错误码：" . $fileInfo['error'];
}

额外注意事项 #

• 确保站点根目录下的uploads目录有写入权限，Linux环境下可以执行chmod 755 uploads或者chown www-data:www-data uploads设置权限。
• 可以在浏览器控制台的网络标签页查看请求的返回状态，方便排查细节问题。

内容的提问来源于stack exchange，提问作者David Joel Lukombo