javascript - 在 PHP 中将本地镜像 blob 转换为 base64

Question

我正在为内部工具开发一个 (HTML) 表单。用户可以填写有关问题的数据并附上屏幕截图。然后通过 ajax 将该表单提交给 PHPMailer 进行发送。问题出在屏幕截图上。由于系统限制，我无法让用户实际将文件上传到服务器。

目前，我使用 HTML5 文件阅读器来选择文件。然后，我将图像 blob 转换为 base64 并将它们发送到 PHPMailer，以转换为附件。这实际上效果很好。但是，我遇到了文件大小问题。具体来说，是 1000px x 1000px (402KB) 的测试图像。生成的 Base64 字符串长度超过一百万个字符，并且请求返回 413(请求实体太大)。

据我了解，base64 并不是传输大图像的有效方法，并且我看过各种有关从数据库检索/转换图像 blob 的帖子。我无法找到有关检索本地镜像 blob 并将其转换为 base64 的信息。

我的图像 blob URL 如下所示: Blob :http://example.com/18960927-e220-4417-93a4-edb608e5b8b3

是否可以在PHP中获取本地镜像数据，然后将其转换为base64？

我无法发布大部分源代码，但是以下内容将让您了解我如何使用 filereader

window.onload=function(){
window.URL = window.URL || window.webkitURL;

var fileSelect = document.getElementById("fileSelect"),
    fileElem = document.getElementById("fileElem"),
    fileList = document.getElementById("fileList");

fileSelect.addEventListener("click", function (e) {
  if (fileElem) {
    fileElem.click();
  }
  e.preventDefault(); // prevent navigation to "#"
}, false);
}

function handleFiles(files) {
  if (!files.length) {
    fileList.innerHTML = "<p>No files selected!</p>";
  } else {
    fileList.innerHTML = "";
    var list = document.createElement("ul");
    fileList.appendChild(list);
    for (var i = 0; i < files.length; i++) {
        if(files[i].size > 1000000) {
            alert(files[i].name + ' is too big. Please resize it and try again.');
        } else {
        var li = document.createElement("li");
      list.appendChild(li);

      var img = document.createElement("img");
      img.src = window.URL.createObjectURL(files[i]);
      img.height = 60;
      img.setAttribute("class", "shotzPrev");
      img.onload = function() {
        window.URL.revokeObjectURL(this.src);
      }
      li.appendChild(img);
      var info = document.createElement("span");
      info.innerHTML = files[i].name + "<br>" + files[i].size + " bytes";
      li.appendChild(info);

        }
    }
  }
}

Answer 1

您可以将File对象POST到php

fetch("/path/to/server", {
  method: "POST"
  body: files[i]
})
.then(response => console.log(response.ok))
.catch(err => console.error(err));