javascript - 在 JavaScript 中获取动态文件输入的 FileReader 结果

Question

我是 JS 新手，我在工作中要做一个功能，但我不太知道如何处理它。

我有一个表单，用户可以在其中动态地按按钮添加项目。其中一个按钮允许添加输入以上传文件。为了简单起见，我将 HTML 恢复为如下所示:

原始 div 的形式是:

<div id="userContent">

</div>

当用户按下按钮时，它会添加元素，在本例中为文件输入:

<div id="userContent">
    <div id="inputFile-1" class="customTabContent"> 
        <input id="file-1" type="file" required="required">
    </div>
    <div id="inputFile-2" class="customTabContent"> 
        <input id="file-2" type="file" required="required">
    </div>
    <div id="inputFile-3" class="customTabContent"> 
        <input id="file-3" type="file" required="required">
    </div>
</div>

当用户完成添加元素并按下按钮提交数据时，我读取 DOM 并查看创建用户的内容，首先我获取父级:

var parent = document.getElementById('userContent');

然后，我迭代子项，并为每个子项获取输入:

var input = document.getElementById('file-1');
var file = input.files[0];

然后我使用此函数读取文件并返回 base64 格式的值，使用 closures获取值:

function getBase64(file) {
    var base64data = null;
    var fileReader = new FileReader();
    fileReader.onloadend = (function () {
        return function () {
            var rawData = fileReader.result;
            /* Remove metadata */
            var cleanedData = rawData.replace(/^data:(.*;base64,)?/, '');
            /* Ensure padding if the input length is not divisible by 3 */
            if ((cleanedData.length % 4) > 0) {
                cleanedData += '='.repeat(4 - (cleanedData.length % 4));
            }
            base64data = cleanedData;
        }
    })();
    fileReader.readAsDataURL(file);

    return base64data;
}

我的问题是在网站上，我收到一条错误消息 base64data这是null 但是如果我在 return base64data; 上放置一个断点在 getBase64(file) 末尾该变量具有 base64 上的值，如果我释放调试器，我可以将该值发送到服务器。

阅读文档，FileReader它是异步的，所以我认为问题似乎与它有关，但我怎样才能实现我想做的事情呢？我不知道为什么在调试器上我可以得到该值，但在调试器之外却不能。我很困惑......

问候。

P.D:如果我没有回复，那是因为我不在工作，很抱歉回复延迟。

--------编辑1

感谢Sjoerd de Wit我可以获得结果，但无法分配给变量:

var info = {'type': '', 'data': ''};

........
} else if (it_is_a_file) {
    var file = input.files[0];
    var base64data = null;
    getBase64(file).then((result) => {
        base64data = result;
        info['type'] = 'file';
        info['data'] = base64data;
    });
} else if 
.......
return info;

但是在 info我得到{'type': '', 'data': ''} 。我用错了 promise ？谢谢。

--------编辑2

这个问题是因为作为 JavaScript 菜鸟，我不知道使用 FLASK 必须使用表单并以不同的方式获取数据。

所以，这个问题的答案是搜索如何从 FORM 获取数据与 FLASK 。

但我会将答案标记为正确，因为您可以获得我所要求的值。

Answer 1

您可以将该函数返回一个 promise ，然后在加载时解析 base64data。

    function getBase64(file) {
    return new Promise((resolve, reject) => {
      var fileReader = new FileReader();

      fileReader.onloadend = (function () {
          return function () {
              var rawData = fileReader.result;
              /* Remove metadata */
              var cleanedData = rawData.replace(/^data:(.*;base64,)?/, '');
              /* Ensure padding if the input length is not divisible by 3 */
              if ((cleanedData.length % 4) > 0) {
                  cleanedData += '='.repeat(4 - (cleanedData.length % 4));
              }
              resolve(cleanedData);
          }
      })();

      fileReader.readAsDataURL(file);
    });
  }

然后你可以在你想阅读的地方执行以下操作:

  getBase64(file).then((base64data) => {
    console.log(base64data);
  })