如何解决使用React JS和Laravel将带有图像文件的POST请求发送到数据库时出现内部服务器错误
我正在尝试使用带有Laravel作为后端的React JS和REST API上传图像。
我有一个带有名称和徽标的合作伙伴模型。我创建了一个表单来输入其名称和徽标。
当我仅输入合作伙伴的名称并提交时,我发现新的合作伙伴已添加到数据库中。
但是当我尝试上载合作伙伴的徽标时,出现此错误:POST http:// localhost:8000 / api / eventpartners 500(内部服务器错误)
在我的浏览器上,当我去检查->网络时,我发现此错误:{消息:“数组到字符串的转换”,异常:“ ErrorException”,…}
这是AddPartnerForm.js代码:
import React,{ Component } from 'react';
import Box from '@material-ui/core/Box';
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
import Skeleton from '@material-ui/lab/Skeleton';
import axios,{ post } from 'axios';
export default class AddPartnerForm extends Component {
constructor(props) {
super(props);
this.state = {
newPartnerData: {
partnerlogoimage: '',partnername: ''
},partnerlogouploaded: false
}
this.onFormSubmit = this.onFormSubmit.bind(this)
this.onChange = this.onChange.bind(this)
this.addPartner = this.addPartner.bind(this)
this.onUpload = this.onUpload.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
onChange(e) {
this.setState({
newPartnerData: {
[e.target.name]: e.target.value
}
});
}
onUpload(e) {
let file = e.target.files[0];
this.setState(prev => ({
...prev,newPartnerData: {
...prev.newPartnerData,partnerlogoimage: file,},partnerlogouploaded: true
}));
}
handleSubmit(e) {
e.preventDefault()
this.addPartner();
console.log(this.state.newPartnerData)
}
addPartner() {
const url = 'http://localhost:8000/api/eventpartners';
return axios.post(url,this.state.newPartnerData)
.then((response) => {
let { partners } = this.state;
partners.push(response.data);
this.setState({
newPartnerData: {
partnerlogoimage: '',partnername: '',}
})
})
}
render() {
const newPartnerData = this.state.newPartnerData;
const partnerlogouploaded = this.state.partnerlogouploaded;
let partnerlogo;
if (partnerlogouploaded) {
partnerlogo = <img style={{ width: 200,height: 200 }} src={this.state.partnerlogoimage} />;
} else {
partnerlogo = <Skeleton variant="rect" width={200} height={200} />;
}
return (
<form >
<TextField
name="partnername"
autoFocus
margin="dense"
id="name"
label="Partner's name"
type="text"
fullWidth
onChange={this.onChange}
/>
<input accept="image/*"
style={{ display: 'none' }}
id="contained-button-partner-logo"
name="partnerlogoimage"
multiple
type="file"
diplay="none"
onChange={this.onUpload} />
<label htmlFor="contained-button-partner-logo" className="upload-button">
<Button variant="contained" color="primary" component="span" >
Upload Partner Logo
</Button>
</label>
<Box width={200} height={200} marginRight={0.5} my={5}>
{partnerlogo}
</Box>
<Button type="submit" onClick={this.handleSubmit} variant="contained" color="primary" component="span" >
Add
</Button>
</form>
)
}
}
我正在使用Laravel作为此应用程序的后端。
这是EventPartnerController.php文件,如果有帮助的话:
<?php
namespace App\Http\Controllers;
use App\Eventpartner;
use Illuminate\Http\Request;
class EventpartnerController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
$eventpartners = Eventpartner::all();
return $eventpartners;
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
$request->all();
$eventpartner = new Eventpartner();
$eventpartner->event_id = $request->event_id;
$eventpartner->partnername = $request->partnername;
$eventpartner->partnerlogoimage = $request->partnerlogoimage;
$eventpartner -> save();
return response()->json($eventpartner);
}
}
这是路由文件api.php:
<?php
Use App\Eventpartner;
Use App\Http\Controllers\EventpartnerController;
Route::get('eventpartners',function() {
return Eventpartner::all();
});
Route::post('eventpartners','EventpartnerController@store');
如果我应该在此问题中添加任何缺少的代码,请在评论中告诉我。
解决方法
您以字符串类型发送 partnerLogoImage ,但发送了图像 应该始终以 Blob 类型发送到后端。我认为您的后端很好,但问题出在前端端,您没有在 image(partnerLogoImage)中使用 Blob 类型。请在 axios POST请求中以Blob类型发送图像,它将正常工作。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。