Javascript 在PHP中将本地图像blob转换为base64

Javascript 在PHP中将本地图像blob转换为base64,javascript,php,base64,filereader,Javascript,Php,Base64,Filereader,我正在为一个内部工具开发一个HTML表单。用户可以填写有关问题的数据并附上屏幕截图。然后通过ajax将此表单提交给PHPMailer进行发送。问题在于屏幕截图。由于系统限制,我无法让用户将文件实际上载到服务器 目前,我正在使用HTML5文件阅读器来选择文件。然后,我将图像blob转换为base64,并将它们发送到PHPMailer,以转换为附件。这真的很有效。但是,我遇到了文件大小问题。特别是1000px 1000px 402KB的测试图像。生成的base64字符串长度超过一百万个字符,请求返回

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

目前,我正在使用HTML5文件阅读器来选择文件。然后,我将图像blob转换为base64,并将它们发送到PHPMailer,以转换为附件。这真的很有效。但是,我遇到了文件大小问题。特别是1000px 1000px 402KB的测试图像。生成的base64字符串长度超过一百万个字符,请求返回的413请求实体太大

我知道base64并不是传输大型图像的有效方法,我也看到过关于从数据库检索/转换图像块的各种帖子。我找不到的是有关检索本地图像blob并将其转换为base64的信息

我的图像blob URL如下所示: 水滴:

是否可以在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);

        }
    }
  }
}

我认为它是nginx错误,请更改nginx.conf文件中的client_max_body_size值

例如:

# set client body size to 2M #
client_max_body_size 2M;
PHP配置可选

您的php安装还限制了上载文件的大小。编辑php.ini并设置以下指令

;This sets the maximum amount of memory in bytes that a script is allowed to allocate
memory_limit = 32M

;The maximum size of an uploaded file.
upload_max_filesize = 2M

;Sets max size of post data allowed. This setting also affects file upload. To upload large files, this value must be larger than upload_max_filesize
post_max_size = 3M
您可以将文件对象发布到php


救护车位于悬崖编码的底部-您能否更改系统限制生成的base64字符串长度超过一百万个字符,并且请求返回的413请求实体太大,是否可以在PHP中获取此本地图像数据,然后将其转换为base64?如果前者不改变,后者将如何解决问题?你所说的抓住当地形象是什么意思?为什么要将数据URI发送到服务器,而不是文件对象本身或FormData对象?@guest271314我的意思是,我可以将更小的图像块传输到PHPMailer并在那里获取base64吗?是的,您可以将文件或Blob对象发布到php,而无需将文件或Blob对象转换为数据URI。在php中,您可以使用php://input 要获取上传的文件,您可以使用fetch或XMLHttpRequest将文件对象发布到服务器。因此,我正在测试这一点,它会在文件对象上传后立即发布它们。我如何让它等待,直到表单提交?因此,可以一次提交所有数据用户文本和图像对象。然后,在我的表单mailer中,我可以使用php://input 要访问图像对象并将其转换为base64,您可以使用FormData向服务器发布多个键、值对。我知道我可以发布多个值。如何使其等待所有表单数据提交?在最终表单提交之前立即将它们发送到PHPMailer脚本没有多大意义,因为它需要剩余的数据来发送实际的电子邮件。您可以在用户提交表单时需要输入的元素处设置required属性
fetch("/path/to/server", {
  method: "POST"
  body: files[i]
})
.then(response => console.log(response.ok))
.catch(err => console.error(err));