Блог

Я пытаюсь создать загрузчик изображений, но я получаю эту ошибку всякий раз, когда пытаюсь загрузить изображение. я думаю, что все конфигурации, которые я сделал с multer, в порядке, поэтому я не могу найти, в чем ошибка.

Я делаю это с помощью модуля multer. Если кто-нибудь может мне помочь, я был бы очень признателен, так как я довольно долго пытался решить эту ошибку, и я продолжаю получать ту же ошибку.

на стороне сервера:

 const express = require('express');
const router = express.Router();
const multer  = require('multer');

const Clients = require('../models/clients.js')

const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    callback(null, "./uploads")
  },
  filename: (req, file, callback) => {
    callback(null, file.originalname)
  }
})

const upload = multer({storage: storage})

router.route('/').get((req, res) => {
    Clients.find()
    .then(client => res.json(client))
    .catch(err => res.status(400).json('Error:'   err))
})

router.route('/add', upload.single("articleimage")).post((req, res) => {
  
    const newClient = new Clients({
      image: req.file.originalname,
      firstName: req.body.firstName,
      lastName: req.body.lastName,
      weight: req.body.weight,
      BMI: req.body.BMI
    })
  
    newClient.save()
    .then (() => res.json(newClient))
    .catch(err => res.status(400).json('error'   err))
})

module.exports = router
 

Сторона клиента:

 import React, {useState} from 'react'
import FileBase64 from 'react-file-base64';
import axios from 'axios'

function AddClient() {

    const [firstName, setFirstName] = useState('')
    const [lastName, setLastName] = useState('')
    const [weight, setWeight] = useState('')
    const [BMI, setBMI] = useState('')
    const [image, setImage] = useState('')

    const selectedFile = (e) => {
        setImage(e.target.files[0])
    }
    console.log(image)

    const submitForm = (e) => {
        e.preventDefault()

        const formData = new FormData()

        formData.append("image", image)
        formData.append("firstName", firstName)
        formData.append("lastName", lastName)
        formData.append("weight", weight)
        formData.append("BMI", BMI)

          axios.post('http://localhost:4000/clients/add', formData)
          .then(res => console.log(res))
    }

    console.log(firstName)

    return (
        <div>
<form class="w-full max-w-lg" onSubmit={submitForm} encType="multipart/form-data">
  <div class="flex flex-wrap -mx-3 mb-6">
  <input type="file" filename="articleimage" onChange={selectedFile}/>
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
        First Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" onChange={(e) => setFirstName(e.target.value)} placeholder="First Name" />
      <p class="text-red-500 text-xs italic">Please fill out this field.</p>
    </div>
    <div class="w-full md:w-1/2 px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
        Last Name
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" onChange={(e) => setLastName(e.target.value)} placeholder="Last Name" />
    </div>
  </div>
  <div class="flex flex-wrap -mx-3 mb-6">
    <div class="w-full md:w-1/2 px-3 mb-6 md:mb-0">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-first-name">
        Weight
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white" id="grid-first-name" type="text" onChange={(e) => setWeight(e.target.value)} placeholder="Weight" />
      <p class="text-red-500 text-xs italic">Please fill out this field.</p>
    </div>
    <div class="w-full md:w-1/2 px-3">
      <label class="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2" for="grid-last-name">
        Body Mass Index (BMI)
      </label>
      <input class="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 leading-tight focus:outline-none focus:bg-white focus:border-gray-500" id="grid-last-name" type="text" onChange={(e) => setBMI(e.target.value)} placeholder="BMI" />
    </div>
    <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Add Client</button>
  </div>
</form>

        </div>
    )
}

export default AddClient
 

На стороне клиента вы добавляете данные формы как formData.append("image", image) , но на стороне сервера вы пишете «изображение статьи» в upload middleware . Измените его на «изображение», т. е. такое же, как на стороне клиента.

Кроме того, я бы предложил, чтобы код контроллера для загрузки/сохранения изображения и сохранения имени изображения в базе данных были разделены.

Вы должны создать новую функцию контроллера, которая просто сохраняет изображение на вашем сервере и возвращает имя изображения. Вызовите эту функцию контроллера через вызов API в функции selectedFile обратного вызова. А затем сохраните возвращенное имя изображения в состоянии и, наконец, перейдите к отправке формы и сохраните данные в базе данных.