Javascript MeteorJS中的图像文件上载

尝试使用MeteorJS找到上传文件（即用户配置文件pic）并保存到服务器的正确方法

几个月前我尝试过CollectionFS，它刷新了浏览器/Meteor网页，然后文件被保存到服务器的文件系统，最后显示了一个损坏的图像链接

我读过这篇文章，但我不想使用S3，我想确保避免断开链接的问题。也许我需要一个回调来告诉Meteor在服务器上完全写入图像（并调整大小）之前不要刷新网页：

---

对于小文件，一种方法是将它们保存为集合内部的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，则集合可能会损坏，因此图像大小有一个限制

下面的代码供您在中分配base64并下载它。它的质量不好，零件来自教程，但你会明白这一点（它来自一个旧的测试项目）

函数下载（strData、strFileName、strimetype）{
var D=文件，
A=参数，
a=D.createElement（“a”），
d=A[0]，
n=A[1]，
t=A[2]| |“应用程序/八位字节”；
//调试器；
//建立下载链接：
a、 href=strData.replace（“数据：；”，“数据：+strimetype+”；”）。replace（“数据：文本/普通；”，“数据：+strimetype+”；”）；
//试图避免特定于chrome的崩溃（虽然在firefox上可以正常工作）问题69227 google chrome==>
//在ArrayBuffer中转换为二进制文件此需要更改
var binStr1=a.href.replace（“数据：应用程序/octet；base64，”，“”）
.replace（“数据：image/png；base64，”，“”）
.replace（“数据：image/bmp；base64，”，“”）
.replace（“数据：图像/jpeg；base64，”，“”）
.replace（“数据：应用程序/msword；base64，”，“”）
.replace（“数据：应用程序/vnd.ms excel；base64，”，“”）
.replace（“数据：application/vnd.openxmlformats officedocument.spreadsheetml.sheet；base64，”，“”）
.replace（“数据：application/vnd.openxmlformats officedocument.wordprocessingml.document；base64，，”）；
var binStr=atob（binStr1）；
var buf=新阵列缓冲区（binStr.长度）；
var视图=新的UINT8阵列（buf）；
对于（变量i=0；i//关于您关于显示错误图像的问题，您可以在上载完成后将图像URL写入Meteor集合。让图像
src
依赖Meteor集合，然后图像将在上载完成后自动更新其
src
，这就是CollectionFS所做的，o只是在更新集合之前没有检查文件是否已写入。确实，但只要稍加清理，您就可以准备好。主要思想是，对于小文件，您可以将其作为字符串基64放入数据库中。无需尝试寻找复杂的解决方案或附加组件等。配置文件图片非常小，如5-10kb，非常适合可以将其作为单独的集合或在用户集合中。
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;
    }