如何将DataURL保存至服务器存储 解决大体积DataURL AJAX传参问题

前端实现 #

你之前的代码仅触发本地下载，要上传到服务端需要将DataURL转为二进制Blob对象，通过FormData封装后用POST请求传递，完全规避字符串长度限制问题，示例代码如下：

// DataURL转Blob工具函数
function dataURLToBlob(dataurl) {
  let arr = dataurl.split(','),
      mime = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
  while(n--){
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new Blob([u8arr], {type: mime});
}

// 上传到服务端的方法
function uploadToServer(dataurl, savePath) {
  let blob = dataURLToBlob(dataurl);
  let formData = new FormData();
  // 把Blob对象加入FormData，第三个参数指定文件名
  formData.append('upload_file', blob, savePath.split('/').pop());
  formData.append('save_path', savePath); // 可选，传递要保存的服务端路径

  // 发送AJAX请求
  let xhr = new XMLHttpRequest();
  xhr.open('POST', 'upload.php', true);
  xhr.onload = function () {
    if (xhr.status === 200) {
      console.log('上传成功，服务端返回：', xhr.responseText);
    } else {
      console.error('上传失败，状态码：', xhr.status);
    }
  };
  xhr.send(formData);
}

// 调用示例，替换你原来的downloadURI调用
uploadToServer(data, 'images/download.png');

后端PHP实现 #

新建upload.php接收上传的文件，写入到指定服务端路径：

<?php
// 配置允许上传的文件类型、大小限制
$allowTypes = ['image/png', 'image/jpeg', 'image/gif'];
$maxSize = 20 * 1024 * 1024; // 20M，根据业务调整
$saveRoot = __DIR__ . '/'; // 服务端存储根目录，根据实际路径修改

// 校验上传文件是否存在错误
if ($_FILES['upload_file']['error'] !== UPLOAD_ERR_OK) {
  die('上传失败，错误码：' . $_FILES['upload_file']['error']);
}

// 校验文件大小
if ($_FILES['upload_file']['size'] > $maxSize) {
  die('文件体积超出限制');
}

// 校验文件类型
if (!in_array($_FILES['upload_file']['type'], $allowTypes)) {
  die('不允许的文件类型');
}

// 安全处理：防止路径遍历攻击
$savePath = realpath($saveRoot) . DIRECTORY_SEPARATOR . ltrim(str_replace('../', '', $_POST['save_path']), '/');

// 创建目录（如果不存在）
if (!is_dir(dirname($savePath))) {
  mkdir(dirname($savePath), 0755, true);
}

// 移动上传的临时文件到目标路径
if (move_uploaded_file($_FILES['upload_file']['tmp_name'], $savePath)) {
  echo '文件保存成功，路径：' . $savePath;
} else {
  echo '文件保存失败，请检查目录权限';
}
?>

注意事项 #

• 调整php.ini配置避免大文件上传拦截：
  • upload_max_filesize = 20M（单文件最大体积，根据业务调整）
  • post_max_size = 20M（POST请求总大小，需要大于等于upload_max_filesize）
• 确保服务端要存储文件的根目录有可写权限，Linux环境可执行chmod -R 755 你的存储目录路径授权
• 生产环境建议增加额外的安全校验，比如文件名重命名、文件内容真实格式校验，避免恶意文件上传

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