javascript - 在 react 中上传和读取文件

Question

我尝试使用 React 上传文件并查看其内容，但它给我的是 C:\fakepath\。我知道它为什么会给出 fakepath，但是在 React 中上传和读取文件内容的正确方法是什么？

<input type="file"
      name="myFile"
      onChange={this.handleChange} />

handleChange: function(e) {
        switch (e.target.name) {
        case 'myFile':
            const data = new FormData();
            data.append('file', e.target.value);
            console.log(data);
        default:
            console.error('Error in handleChange()'); break;
        }
    },

Answer 1

要获取您想要使用的文件信息，event.target.files 是选定文件的数组。这些中的每一个都可以通过 FormData 轻松上传目的。例如，请参见以下代码段:

class FileInput extends React.Component {
    constructor(props) {
      super(props)
      this.uploadFile = this.uploadFile.bind(this);
    }
    
    uploadFile(event) {
        let file = event.target.files[0];
        console.log(file);
        
        if (file) {
          let data = new FormData();
          data.append('file', file);
          // axios.post('/files', data)...
        }
    }
    
    render() {
      return <span>
        <input type="file"
        name="myFile"
        onChange={this.uploadFile} />
      </span>
    }
}

ReactDOM.render(<FileInput />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<div id="root"></div>

您可能需要查看 FileReader如果您想在客户端处理文件，例如显示图像，这会有所帮助。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader