尝试使用React和Laravel 7将图像插入数据库

Question

我在控制台中收到这个错误：

xhr.js:184 POST http://localhost:8000/api/admin 500 (Internal Server Error)
Uncaught (in promise) Error: Request failed with status code 500

这是我的组件：

import axios from "axios";
export default class Home extends Component {
constructor(props) {
super(props);
this.state = {
selectedFile: "",
banner_img: "",
};
this.submitBanner = this.submitBanner.bind(this);
}
fileSelect = (event) => {
this.setState({ selectedFile: event.target.files[0] });
console.log(event.target.files[0]);
};
submitBanner() {
let test = this.state.selectedFile;
const fd = new FormData();
fd.append("banner_img", this.state.selectedFile);
axios.post("http://localhost:8000/api/admin", test);
}
render() {
return (
<Col md={{ span: 10, offset: 1 }} className="mt-4">
<h3>Banner Image</h3>
<input
type="file"
className="from-control"
name="banner_img"
onChange={this.fileSelect}
/>
<Button variant="primary" onClick={this.submitBanner}>
Submit
</Button>
</Col>
);
}
}

Answer 1

这可能有助于

<!-- update callback method onclick -->
<Button variant="primary" onClick={() => this.submitBanner()}>Submit</Button>  
submitBanner() {
let test = this.state.selectedFile;
const fd = new FormData();
fd.append("banner_img", this.state.selectedFile);
fd.append("banner_img", fd);
axios.post("http://localhost:8000/api/admin", fd); // add this line
}