【发布时间】: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 吗?而不必传输该数据。
-
是的,您可以将
POSTFile或Blob对象转换为php,而无需将File或Blob对象转换为data URI。在php可以使用php://input获取上传的文件 -
您可以使用
fetch()或XMLHttpRequest()到POSTFile对象到服务器
标签: javascript php base64 filereader