我想知道该怎么做,因为我遇到并尝试过的所有解决方案都失败了。我有一个关于react的表格,我正尝试将数据发送到laravel路由,以便可以将其存储在数据库和文件系统中,第一个我什至没有做到,因为第一个总是有500个响应,我会离开我如何执行此操作的示例:
import React, { Component } from "react";
class Example extends Component {
constructor(props) {
super(props);
this.state = {
image: "",
sucess: false,
error: false,
imagePreviewUrl: false,
};
this.fileUpload = this.fileUpload.bind(this);
this.onChange = this.onChange.bind(this);
}
onChange(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.createImage(files[0]);
}
createImage(file) {
let reader = new FileReader();
reader.onload = (e) => {
this.setState({
image: e.target.result,
});
};
reader.readAsDataURL(file);
}
render() {
return (
<form onSubmit={this.onFormSubmit} encType="multipart/form-data">
<h1>Insert Material</h1>
<label className="label_imagem_artigo"> Imagem do artigo: </label>
<input
className="input_imagem_artigo"
type="file"
onChange={this.onChange}
/>
<div className="imgPreview">
{imagePreviewUrl ? (
<img
className="add_imagem"
Name="add_imagem"
src={imagePreviewUrl}
/>
) : (
"Upload image"
)}
</div>
</form>
);
}
}
export default Example;
请求只是发送状态的axios,其中包括图像示例,然后将其发送到服务器以存储如下功能:
$request->file("image_url")->store("public/stores/product/images/");
return response("done", 200);
话虽如此,我在哪里犯错?我花了很多时间,却没有找到基于在线解决方案和其他堆栈溢出问题尝试的许多方法的任何解决方案