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

Question

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

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

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

但是当我尝试上传合作伙伴的徽标时出现此错误：POST http://localhost:8000/api/eventpartners 500（内部服务器错误）

在我的浏览器上，当我转到 inspect->Network 时，我发现了这个错误：{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');

如果有任何遗漏的代码我应该添加到这个问题中，请在评论中告诉我。

Answer 1

您发送的 partnerLogoImage 是字符串类型，但是 images 应该始终以 Blob 类型发送到后端。我认为您的后端很好，但问题出在 Frontend 方面，您没有使用 Blob type for image (partnerLogoImage) 。请在 axios POST 请求中以 Blob 类型发送图像，它将正常工作。

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

Getting Internal Server Error when sending POST request with an image file to database using React JS and Laravel

javascript

file-upload

image-upload

laravel

reactjs