req.file 在 multer 中未定义。尝试将图像路径上传到本地文件夹。在邮递员中而不是在浏览器中工作

Question

在下面找到我的代码。此代码在邮递员中工作正常返回 req.file.path 完美。但不是在浏览器中。使用 req.files 而不是 req.file 仍然没有用。在互联网上尝试了很多解决方案但无法弄清楚。请帮助。我在这里犯了什么错误。它在集成中吗？

上传路由.js

 import path from 'path'
 import express from 'express';
 import multer from 'multer';
 const router=express.Router()

 const storage=multer.diskStorage({
 destination(req,file,cb){
    cb(null,'uploads/')
 },
 filename(req,file,cb){
    cb(
        null,
        `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
      )
 },
 })

function checkFileType(file, cb) {
const filetypes = /jpg|jpeg|png/
const extname = filetypes.test(path.extname(file.originalname).toLowerCase())
const mimetype = filetypes.test(file.mimetype)
if (extname && mimetype) {
  return cb(null, true)
} else {
  cb('Images only!')
}
}

const upload=multer({
storage,
limits: { fieldSize: 10 * 1024 * 1024 },
fileFilter: function (req, file, cb) {
    checkFileType(file, cb)
  },
})

router.post('/', upload.single('image'), (req, res) => {
console.log("max",req.file) //i am getting this as undefined in the console
res.send(`/${req.file.path}`)
})

export default router

Server.js

const __dirname=path.resolve()
app.use('/uploads',express.static(path.join(__dirname,'/uploads')))

端点

  upload:builder.mutation({
  query:(formData)=>{
  return{
    url:`/api/upload`,
    method:'POST',
    body:formData,
    headers:{
      'Content-type':'multipart/form-data boundary=MyBoundary'
    }
  }
  }
  })

上传屏幕.js

   import React,{useState,useEffect} from 'react'
   import { Form, Button} from 'react-bootstrap'
   import { useUploadMutation} from '../app/api'

   const ProductUploadScreen=()=> {


   const [image, setImage] = useState('')

   const[uploadImage,uploadImageResponse]=useUploadMutation()


 const uploadFileHandler = async (e) => {
    const file=e.target.files[0]
    const formData=new FormData()
    formData.append('image',file)
      try {
         await uploadImage(formData) 
         setImage(uploadImageResponse.data)
      } catch (error) {
          console.log(error)
      }
  }


  return (
  <>
  <Link to='/admin/productlist' className='btn btn-light my-3'>
  Go Back
</Link>
<Container>
  <h1>Upload Product</h1>
    <Form onSubmit={submitHandler} encType="multipart/form-data">
      <Form.Group>
        <Form.Label>Name</Form.Label>
        <Form.Control
          type='name'
          placeholder='Enter name'
          value={name}
          onChange={(e) => setName(e.target.value)}
        ></Form.Control>
      </Form.Group>

      <Form.Group>
        <Form.Label>Price</Form.Label>
        <Form.Control
          type='number'
          placeholder='Enter price'
          value={price}
          onChange={(e) => setPrice(e.target.value)}
        ></Form.Control>
      </Form.Group>

      <Form.Group>
        <Form.Label>Image</Form.Label>
        <Form.Control
          type='text'
          placeholder='Enter image url'
          value={image}
          onChange={(e) => setImage(e.target.value)}
        ></Form.Control>
        <Form.Control
          type='file'
          id='image-file'
          label='Choose File'
          onChange={uploadFileHandler}
        ></Form.Control>
      </Form.Group>

      <Form.Group>
        <Form.Label>Brand</Form.Label>
        <Form.Control
          type='text'
          placeholder='Enter brand'
          value={brand}
          onChange={(e) => setBrand(e.target.value)}
        ></Form.Control>
      </Form.Group>

      <Form.Group>
        <Form.Label>Count In Stock</Form.Label>
        <Form.Control
          type='number'
          placeholder='Enter countInStock'
          value={countInStock}
          onChange={(e) => setCountInStock(e.target.value)}
        ></Form.Control>
      </Form.Group>

      <Form.Group>
        <Form.Label>Category</Form.Label>
        <Form.Control
          type='text'
          placeholder='Enter category'
          value={category}
          onChange={(e) => setCategory(e.target.value)}
        ></Form.Control>
      </Form.Group>

      <Form.Group>
        <Form.Label>Description</Form.Label>
        <Form.Control
          type='text'
          placeholder='Enter description'
          value={description}
          onChange={(e) => setDescription(e.target.value)}
        ></Form.Control>
      </Form.Group>

      <Button type='submit' variant='primary'>
        Upload
      </Button>
    </Form>
  {/* )} */}
</FormContainer>
</>  
)
}

export default ProductUploadScreen

Answer 1

你的

submithandeler

在哪里？你会有答案，我想发表评论，但声誉问题。