时间戳

首页 > 解决方案 > 反应：尝试一致地读取自定义文件会导致 index.html

javascript - 反应：尝试一致地读取自定义文件会导致 index.html

问题描述

我正在尝试使用以下代码在我的 React 应用程序中读取用户选择的文件：

function Entries() {

    async function importEntries() {
        let file = document.getElementById('file-select').files[0];
        let response = await fetch(file);
        let textResponse = await response.text();
        console.log(textResponse);
   }

    return (
        <div className='Entries'>
            <h2>Import entries</h2>
                <label htmlFor='file-select'>Select file:</label>
                <input type='file' name='file' id='file-select' />
                <button onClick={importEntries}>Upload</button>
        </div>
    );
}

无论我选择哪个文件，这都会以某种方式始终如一地为我提供我的 React 应用程序公共目录中的 index.html 文件的内容。

有谁知道这是什么原因造成的？

标签： javascriptreactjs

解决方案

尝试这个：

替换<input type='file' name='file' id='file-select' />为<input type='file' name='file' id='file-select' onChange={importEntries}/>

然后将您的importEntries方法替换为：

async function importEntries(e) {
        let file = e.target.files[0];

        /* Try this edit */
        let reader = new FileReader();
        reader.readAsText(file);
        reader.onload = function() {
            console.log(reader.result);
        };
        reader.onerror = function() {
            console.log(reader.error);
        };
   }

我还没有测试过代码让我知道这是否有效。

推荐阅读