Javascript 使用React JS和Laravel将带有图像文件的POST请求发送到数据库时出现内部服务器错误

我正在尝试使用React JS和REST API上传一个以Laravel为后端的图像

我有一个有名字和标志的合作伙伴模型。我创建了一个表单来输入它的名称和徽标

当我只输入合作伙伴的名称并提交时，我发现新的合作伙伴已添加到数据库中

但是当我试图上传合作伙伴的徽标时，我得到了一个错误：POSThttp://localhost:8000/api/eventpartners 500（内部服务器错误）

在我的浏览器上，当我进入inspect->Network时，我发现这个错误：{消息：“数组到字符串的转换”，异常：“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>
    )
  }
}

import React，{Component}来自'React'；
从“@material ui/core/Box”导入框；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/TextField”导入TextField；
从“@material ui/lab/Skeleton”导入骨架；
从“axios”导入axios，{post}；
导出默认类AddPartnerForm扩展组件{
建造师（道具）{
超级（道具）；
此.state={
newPartnerData：{
partnerlogoimage:“”，
合作伙伴名称：“”
},
PartnerLogo:错误
}
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）{
这是我的国家({
newPartnerData：{
[e.target.name]：e.target.value
}
});
}
onUpload（东）{
让file=e.target.files[0]；
this.setState（prev=>({
…上一页，
newPartnerData：{
…prev.newPartnerData，
partnerlogoimage:文件，
},
PartnerLogo：正确
}));
}
handleSubmit（e）{
e、 预防默认值（）
这个.addPartner（）；
console.log（this.state.newPartnerData）
}
addPartner（）{
常量url=http://localhost:8000/api/eventpartners';
返回axios.post（url，this.state.newPartnerData）
。然后（（响应）=>{
设{partners}=this.state；
伙伴。推送（响应。数据）；
这是我的国家({
newPartnerData：{
partnerlogoimage:“”，
合作伙伴名称：“”，
}
})
})
}
render（）{
const newPartnerData=this.state.newPartnerData；
const partnerLogoUpload=this.state.partnerLogoUpload；
让合作伙伴的标志；
如果（已上载）{
partnerlogo=；
}否则{
partnerlogo=；
}
返回(
上传合作伙伴徽标
{partnerlogo}
添加
)
}
}

我正在使用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);
    }

    
}

---

您正在以字符串类型发送partnerLogoImage，但是图像
应始终以Blob类型发送到后端。我认为您的后端很好，但问题出在前端端，您没有为图像（partnerLogoImage）使用Blob类型。请在axiosPOST请求中以Blob类型发送图像，它将正常工作。
什么时候出现错误？上传还是提交？当我提交时。在console.log中，它返回我以json格式正确输入的合作伙伴数据<代码>合作伙伴

不在状态中。下一行将失败，我应该如何修改它？我需要理解用例。你真的需要在州内推动合作伙伴吗？

<?php
Use App\Eventpartner;
Use App\Http\Controllers\EventpartnerController;

Route::get('eventpartners', function() {
    return Eventpartner::all();
});
Route::post('eventpartners', 'EventpartnerController@store');