使用XHR对象和FormData,可以在React应用程序中轻松上传文件,无需使用Node.js作为服务器。以下是一个简单的代码示例:
import React, { Component } from 'react';
class FileUpload extends Component {
constructor(props) {
super(props);
this.state = {
selectedFile: null
};
}
fileChangedHandler = event => {
this.setState({selectedFile: event.target.files[0]})
}
uploadHandler = () => {
const formData = new FormData();
formData.append(
'myFile',
this.state.selectedFile,
this.state.selectedFile.name
);
fetch('/api/upload', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(success => {
console.log(success);
})
.catch(error => {
console.error(error);
});
}
render() {
return (
);
}
}
export default FileUpload;
此示例中,我们首先在构造函数中初始化state,以便在选择文件时更新所选文件的状态。然后,我们在文件选择框的onChange处理程序中更新选定的文件。最后,在单击上传按钮时,我们创建一个新的FormData对象,并将其与选定的文件一起使用fetch API发送到服务器。
请注意,这仅是一个简单的示例。更复杂的应用程序可能需要更多的逻辑和错误处理。