javascript - 使用 React JS 和 Laravel 将带有图像文件的 POST 请求发送到数据库时出现内部服务器错误
问题描述
我正在尝试使用以 Laravel 作为后端的 React JS 和 REST API 上传图像。
我有一个有名称和徽标的合作伙伴模型。我创建了一个表单来输入其名称和徽标。
当我只输入合作伙伴的名称并提交时,我发现新的合作伙伴已添加到数据库中。
但是当我尝试上传合作伙伴的徽标时,我收到此错误:POST http://localhost:8000/api/eventpartners 500 (Internal Server Error)
在我的浏览器上,当我去检查->网络时,我发现这个错误:{message: "Array to string conversion", exception: "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类型发送到后端。我认为您的后端很好,但问题出在前端,您没有使用Blob类型的图像 (partnerLogoImage)。请在axios POST 请求中发送 Blob 类型的图像,它将正常工作。
推荐阅读
- sql - 编写返回层次结构所有成员的查询
- javascript - 对 Zebra TLP 2824 Plus 进行编程以在并排标签上打印条形码
- sql - 使用参数从左连接表返回所有、匹配或不匹配的行
- docusignapi - DocuSign API - 信封选项卡显示签名日期的日期和月份
- html - 如何在 Css 类中设置优先级?
- javascript - 在 jquery 数据表中选择单个复选框
- javascript - 验证反应js中的输入
- python - 来自私人 github 存储库的 pip 安装包,在 docker 中使用部署密钥
- glsl - glsl片段着色器颜色添加逻辑
- android - Android - 如何从 Firebase 解锁您的 IP 地址?