将 base64 转换后的文件存储在变量中以备后用

Question

情况：

用户可以选择附加文件的表单，带有一个简单的文件选择器，它在文件被选择后立即将其转换为 Base64 并存储以供以后使用。

var handleFileSelect = function(evt) {
    var files = evt.target.files;
    var file = files[0];
    if (files && file) {
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            konvertierteDatei = btoa(binaryString);
        };

        reader.readAsBinaryString(file);
    }
};

if (window.File && window.FileReader && window.FileList && window.Blob) {
    document.getElementById('attachementName').addEventListener('change', handleFileSelect, false);
} else {
    alert('Die Datei APIs werden von diesem Browser nicht vollständig unterstützt.');
}

问题

它之前使用了一种糟糕的解决方法，我将 base64 编码文件存储在隐藏的 textarea 中，然后通过获取所述 textarea 的值将其添加到我的 JSON 数据中。

我想通过将编码文件存储在konvertierteDatei 中并稍后将其值添加到数据中来使这个“更好”，但无论如何我都无法正常工作。

解决方案：

编辑：这是一个有效的 sn-p，看起来像 @H.B.是的，我试图从不同的范围访问konvertierteDatei

var handleFileSelect = function(evt) {
var files = evt.target.files;
var file = files[0];
if (files && file) {
    var reader = new FileReader();

    reader.onload = function(readerEvt) {
        var binaryString = readerEvt.target.result;
        konvertierteDatei = btoa(binaryString);
        document.getElementById("base64textarea").value = btoa(binaryString);
    };

    reader.readAsBinaryString(file);
}
};

if (window.File && window.FileReader && window.FileList && window.Blob) {
document.getElementById('attachementName').addEventListener('change', handleFileSelect, false);
} else {
alert('Die Datei APIs werden von diesem Browser nicht vollständig unterstützt.');
}

<input class="infrastruktur__input infrastruktur__input---file" id="attachementName" type="file"/>
<br>
<h1>Base64 encoded file</h1>
     <textarea id="base64textarea" placeholder="Base64 will appear here" cols="50" rows="15"></textarea>

Answer 1

您的大部分代码似乎应该可以运行，但我认为您正试图在元素存在于 DOM 或其他东西之前添加事件侦听器。

添加一个事件监听器来等待 DOM 完成加载所有元素就足以让我让它工作了；

var handleFileSelect = function(evt) {
    alert("file selected");
    var files = evt.target.files;
    var file = files[0];
    if (files && file) {
        var reader = new FileReader();

        reader.onload = function(readerEvt) {
            var binaryString = readerEvt.target.result;
            konvertierteDatei = btoa(binaryString);
            console.log(konvertierteDatei);
        };

        reader.readAsBinaryString(file);
    }
};



document.addEventListener("DOMContentLoaded", function() { 
    if (window.File && window.FileReader && window.FileList && window.Blob) {
       document.getElementById('attachementName').addEventListener('change', handleFileSelect, false);
    } else {
        alert('Die Datei APIs werden von diesem Browser nicht vollständig unterstützt.');
    }
});

<input class="formOne__input formOne__input---file" id="attachementName" type="file"/>