Javascript FileReader结果将我带到一个空白页，其中包含“0”；关于：空白“已阻止”；在地址栏中

我正在尝试构建一个用户界面，允许用户从他们的计算机下载文件以显示在播放列表中。到目前为止，我所做的只是在列表中显示文件名，如下所示

就在目前，我刚刚开始让每个li的链接显示不同的内容（在它们都相同之前）。但现在我的功能很慢，当我点击链接时，它会给我带来一个空白页面，当我想打开并播放音频时，地址栏中会出现“about:blank#blocked”。这就是我的状态（链接不同）：

这是我的密码：

class DownloadTest extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);

    this.inputRef = React.createRef();

    this.state = {
      files: []
    };
  }


handleClick = event => {

  // Helper code to read file and return promise
  const readFile = (file) => {

    const fileList = [];

    const fileReader = new FileReader();

    // create the promise and return it
    return new Promise((resolve, reject) => {

      // if file reader has an error, report it
      fileReader.onerror = (error) => {
        reject({ error })
      }

      // if success, resolve the promise
      fileReader.onload = (e) => {
        resolve({
          name: file.name,
          link: fileReader.result
        })
      }

      // start reading the file
      fileReader.readAsText(file);
    })
  }

  // create all the file reader promises
  // create an array from the files list and use map to generate
  // an array of promises
  const allReaders = Array.from(event.target.files).map(readFile)

  // Now handle the array of promises we just created
  Promise.all(allReaders)
    .then(fileList => {
      console.log(fileList)
      // set the state that we have all the files
      this.setState({ files: fileList });
    })
    .catch(error => { 
       console.error(error)
    });

}

  render() {
     console.log(this.state);
    return (
      <div className="input">
        <input
          onChange={this.handleClick}
          id="upload-file"
          className="inputName"
          type="file"
          multiple
          ref={this.inputRef}
        />
        <div>
          <ul ref={this.ulRef}>
            {this.state.files.map((file, index) => (
              <li key={index}>
                <a href={file.link} download>{file.name}</a>
              </li>
            ))}
          </ul>
        </div>
      </div>
    );
  }
}

export default DownloadTest;

类下载测试扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleClick=this.handleClick.bind（this）；
this.inputRef=React.createRef（）；
此.state={
文件：[]
};
}
handleClick=事件=>{
//读取文件并返回承诺的帮助程序代码
常量读取文件=（文件）=>{
常量文件列表=[]；
const fileReader=new fileReader（）；
//创造承诺并回报它
返回新承诺（（解决、拒绝）=>{
//如果文件读取器有错误，请报告它
fileReader.onerror=（错误）=>{
拒绝（{error}）
}
//如果成功了，就要兑现承诺
fileReader.onload=（e）=>{
决心({
name:file.name，
链接：fileReader.result
})
}
//开始读取文件
readAsText（文件）；
})
}
//创建所有文件读取器承诺
//从文件列表创建一个数组，并使用映射生成
//一系列承诺
const allReaders=Array.from（event.target.files）.map（readFile）
//现在处理我们刚刚创建的一系列承诺
承诺。所有（所有读者）
。然后（文件列表=>{
console.log（文件列表）
//设置我们拥有所有文件的状态
this.setState（{files:fileList}）；
})
.catch（错误=>{
控制台错误（错误）
});
}
render（）{
console.log（this.state）；
返回(

{this.state.files.map（（文件，索引）=>(


))}

);
}
}
导出默认下载测试；

您正在读取文件中的所有文本并将其分配给file.link，然后将file.link设置为链接的HREF属性。换言之，当您要放置链接的URL时，您将放置文件的全部内容。这肯定是不对的。你知道如何获取URL吗？取决于文件的大小：如果文件很大，你可能需要先将其作为一个Blob读取，然后从该Blob创建一个对象URL。这是怎么做到的？谷歌是你的朋友：）做一些研究，自己尝试，如果你不能让它工作，发布一个新问题（或此版本的更新）使用新代码：）