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

然后我使用此函数读取文件并使用closures返回base64中的值以获取值：

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': ''}。我用错了诺言吗？谢谢。

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

在JavaScript中获取FileReader结果以进行动态文件输入

1 个答案: