在 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];

然后我用这个函数读取文件和returnbase64中的值，使用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 但是如果我在 [=20 上放置一个断点 =] 在 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': ''}。我用错了承诺？谢谢。

-------- 编辑 2

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

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

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

Answer 1

您可以将函数转换为 return 承诺，然后在加载时解析 base64 数据。

    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);
  })

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

Obtain FileReader result in JavaScript for dynamic file inputs

javascript

filereader