【问题标题】:Convert local image blob to base64, in PHP在 PHP 中将本地图像 blob 转换为 base64
【发布时间】:2017-09-20 21:45:55
【问题描述】:

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

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

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

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

是否可以在PHP中抓取这个本地图像数据,然后将其转换为base64?

我不能发布太多的源代码,但是下面将让您了解我是如何使用文件阅读器的

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);

        }
    }
  }
}

【问题讨论】:

  • 悬崖底部的救护车编码 - 你不能改变“系统限制”
  • "生成的base64字符串超过一百万个字符,请求返回413(请求实体太大)","这个能不能抢PHP本地图像数据,然后将其转换为base64?” 如果前者不改变,后者如何解决问题? “抓取本地图像”是什么意思?为什么将data URI 发送到服务器,而不是File 对象本身或FormData 对象?
  • @guest271314 我的意思是我可以将更小的图像 blob 传输到 PHPMailer 并在那里获取 base64 吗?而不必传输该数据。
  • 是的,您可以将POST FileBlob 对象转换为php,而无需将FileBlob 对象转换为data URI。在php可以使用php://input获取上传的文件
  • 您可以使用fetch()XMLHttpRequest()POST File 对象到服务器

标签: javascript php base64 filereader


【解决方案1】:

您可以将POST File 对象转换为php

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

【讨论】:

  • 所以,我正在对此进行测试,它会在文件对象上传后立即发布它们。我如何让它等待,直到提交表单?因此,所有数据(用户文本和图像对象)都可以一次提交。然后,在我的表单邮件中,我可以使用php://input 访问图像对象并将其转换为base64?
  • 您可以使用FormDataPOST 多个键、值对到服务器。
  • 我知道我可以发布多个值。如何让它等到所有表单数据都提交?立即(在最终表单提交之前)将它们发送到 PHPMailer 脚本没有多大意义,因为它需要其余数据来发送实际的电子邮件。
  • 您可以在&lt;form&gt;元素中设置required属性,用户需要输入才能提交form
【解决方案2】:

我认为是 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

【讨论】:

    猜你喜欢
    • 2015-04-22
    • 2019-11-18
    • 2015-08-04
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2022-08-12
    • 2017-07-11
    • 2015-12-26
    相关资源
    最近更新 更多