Question

我正在尝试从file/JOHN目录中已经存在文件的3个文件中加载文件。

文件采用以下格式。假设它们位于以下位置（在file/JOHN文件夹中）：C:/john/file/JOHN/

file1_1555077233.csv
file2_1555077233.csv 
file3_1555077233.csv

由于我正在Windows计算机上对其进行测试，因此可以在C:/john/file/JOHN/的位置上进行安装。但是，最终，在RHEL服务器上，将是这样的/srv/users/JOHN/，因此我将Windows计算机上的用户目录用于测试目的。

文件未显示在文本区域中。但是，单击按钮后1秒钟后会显示文本区域。我在做什么错？

下面的代码在单击Download File按钮1秒后显示一个文本区域。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8"/>
    <title>LoadFiles</title>
    <link rel="stylesheet" href="built/style.css"/>
    <script type="text/javascript">
        var interval;
        function loadFiles() {
            interval = setInterval(displayTextArea, 1000);


        }
        function displayTextArea() {
              console.log(new Date() + " ");

              document.getElementById("downloadtextArea").innerHTML =
                 '<textarea maxlength="500" cols="30" rows="5"></textarea>'; 


                const requests = [
                  'file1_1555077233.csv',
                  'file2_1555077233.csv ',
                  'file3_1555077233.csv'
                ].map(file => {

                 return fetch('file:///C:/john/file/JOHN/' + file)
                    .then(response => response.text())
                    .catch(console.error)
                })

                Promise.all(requests)
                  .then(contents => contents.join('\n'))
                  .then(content => {

                    //container.innerHTML = `<textarea>${content}</textarea>`
                    content.innerHTML = `<textarea>${content}</textarea>`
                  })


                clearInterval(interval);




            }






    </script>
</head>
<body>


<button id="downloadFileButton" onclick="loadFiles()">Download File</button>
<div id ="downloadtextArea"></div>


</body>
</html>

我执行的问题排查步骤：

在浏览器中复制以下路径：

file:///C:/john/file/JOHN/file1_1555077233.csv，我看到了文件

Answer 1

您正在尝试在响应数据上设置innerHTML，而不是在DOM元素上设置

。

在您的displayTextArea()函数中：

function displayTextArea() {
  console.log(new Date() + " ");
  const requests = [
    'file1_1555077233.csv',
    'file2_1555077233.csv ',
    'file3_1555077233.csv'
  ].map(file => {
    return fetch('file:///C:/john/file/JOHN/' + file)
    .then(response => response.text())
    .catch(console.error)
  })

  Promise.all(requests)
  .then(contents => contents.join('\n'))
  .then(content => {
    document.getElementById('downloadtextArea').innerHTML = `<textarea>${content}</textarea>`
  })
}

Answer 2

1秒后显示文本区域的原因是您在loadfiles()方法中设置了1秒的间隔。

您可以指定单击“下载”按钮后控制台中显示的错误吗？是否低于错误？提取API无法加载file:///C:/john/file/JOHN/file1_1555077233.csv。要进行CORS请求，URL方案必须为“ http”或“ https”。

文件未加载到HTML文本区域中

2 个答案: