在MeteorJS中上传图像文件
Image File upload in MeteorJS
试图找到正确的方法来上传文件,即用户个人资料图片,并使用MeteorJS保存到服务器。
几个月前我尝试了 CollectionFS,它在文件保存到服务器文件系统之前刷新了浏览器/Meteor 网页,最终显示了一个损坏的图像链接。
我读了这篇文章,但我不想使用 S3,并希望确保避免断开的链接问题。也许我需要一个回调来告诉 Meteor 在服务器上完全写入(并调整大小)之前不要刷新网页:MeteorJS图片上传/转换
对于小型文件,一种方法是将它们另存为 base64 字符串。检索速度超快。
要读取文件,您可以使用拖放或选择文件,然后使用普通的javascript,例如
var reader = new FileReader();
var filename = file.name;
reader.readAsDataURL(file);
reader.onload = function (imgsrc) {
var fileVar = imgsrc.target.result;
$("#FileUploadingAttachmentNewWay").val(fileVar);
$("#FileUploadingAttachmentNameNewWay").val(file.name);
$("#FileUploadingAttachmentNewWay").click();
}
要回读,您需要从 base64 更改 if 并将其放入您单击并下载的临时元素中(全部在后台)。在 meteor 中注意到,如果文件大小大于 4-5mb,则集合可能会损坏,因此我们对图像大小有限制。
下面的代码供您在 a 中分配 base64 并下载它。它的质量不好,部分来自教程,但你会明白这一点(它来自一个旧的测试项目)。
function download(strData, strFileName, strMimeType) {
var D = document,
A = arguments,
a = D.createElement("a"),
d = A[0],
n = A[1],
t = A[2] || "application/octet";
//debugger;
//build download link:
a.href = strData.replace("data:;", "data:" + strMimeType + ";").replace("data:text/plain;", "data:" + strMimeType + ";");
//trying to avoid chrome specific crash (works ok on firefox though) issue 69227 google chrome====>
//convert to binary in ArrayBuffer this needs change
var binStr1 = a.href.replace("data:application/octet;base64,", "")
.replace("data:image/png;base64,", "")
.replace("data:image/bmp;base64,", "")
.replace("data:image/jpeg;base64,", "")
.replace("data:application/msword;base64,", "")
.replace("data:application/vnd.ms-excel;base64,", "")
.replace("data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,", "")
.replace("data:application/vnd.openxmlformats-officedocument.wordprocessingml.document;base64,", "");
var binStr = atob(binStr1);
var buf = new ArrayBuffer(binStr.length);
var view = new Uint8Array(buf);
for (var i = 0; i < view.length; i++)
view[i] = binStr.charCodeAt(i);
var blob = new Blob([view], { 'type': 'application/octet' });
var URL = webkitURL.createObjectURL(blob)
a.href = URL;
//<=================================================================================================
if (window.MSBlobBuilder) { // IE10
var bb = new MSBlobBuilder();
bb.append(strData);
return navigator.msSaveBlob(bb, strFileName);
} /* end if(window.MSBlobBuilder) */
if ('download' in a) { //FF20, CH19
a.setAttribute("download", n);
a.innerHTML = "downloading...";
D.body.appendChild(a);
setTimeout(function () {
try {
//a.id = "clickToDownload";
//$("#clickToDownload").click();
var e = D.createEvent("MouseEvents");
e.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
a.dispatchEvent(e);
D.body.removeChild(a);
}
catch (e) {
$.notify("There has been an error trying to download file, please try again or with another browser: " + e.message, "error");
}
}, 66);
return true;
}; /* end if('download' in a) */
//do iframe dataURL download: (older W3)
var f = D.createElement("iframe");
D.body.appendChild(f);
f.src = "data:" + (A[2] ? A[2] : "application/octet-stream") + (window.btoa ? ";base64" : "") + "," + (window.btoa ? window.btoa : escape)(strData);
setTimeout(function () {
D.body.removeChild(f);
}, 333);
return true;
}
相关文章:
- 将包含SVG元素的HTML转换为图像文件
- 由多个图像文件组成的响应地图
- 使用文件夹路径名保存所有图像文件和文件名
- 如何将 html5 画布另存为窗口 8 Metro 应用程序中的图像文件
- 将图像文件存储在猫鼬模式中的二进制数据中,并以html形式显示图像
- 如何使用heatmap.js保存canvas标记生成的图像文件
- 如何使用html / angularjs保存图像文件
- 如何从 HTML 或 Javascript for Windows Phone 访问图像文件
- 在 Windows 现代(地铁)UI 应用中存储图像文件和音频文件的方法是什么?
- 节点 js 流星 js 图像文件上传图像损坏
- 从图像URL javascript html保存图像文件
- 如何使用AJAX读取图像文件并渲染到Canvas
- 浏览器和大量的图像文件处理
- 什么错误I'我在下面的jQuery代码中集成filepicker.io来上传一个图像文件
- 节点:将 base64 源写入图像文件
- 如何将图像文件以及JavaScript变量的值上传到服务器和数据库
- 如何从本地文件夹(磁盘存储)读取或获取图像文件,并使用nodejs服务器将其发送到Angularjs
- 如何使用expressnodejs上传图像文件并进行显示
- 如何用我在HTML5画布上绘制的src保存图像文件
- 图像文件因websocket文件传输而损坏