上传并读取文件

Question

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

<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