时间戳

首页 > 解决方案 > multer 给了我未定义的错误“原始名称”

reactjs - multer 给了我未定义的错误“原始名称”

问题描述

我正在尝试制作图像上传器，但每当我尝试上传图像时都会收到此错误。我认为我用 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

标签： reactjsmongodbmulter

解决方案

在客户端，您将 formData 附加为formData.append("image", image)但在服务器端，您在. 将其更改为“图像”，即与客户端相同。upload middleware

另外，我建议将用于上传/保存图像和将图像名称保存在数据库中的控制器代码分开。

您应该创建一个新的控制器函数，将图像保存在您的服务器上并返回图像的名称。通过回调函数中的 API 调用调用该控制器 selectedFile函数。然后，将返回的图片名称保存在状态中，最后继续提交表单并将数据保存到数据库中。

推荐阅读