Блог

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

uploadRoute.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 amp;amp; mimetype) {
    return cb(null, true)
  } else {
    cb('Images only!')
  }
}

const upload = multer({
  storage,
  fileFilter: function (req, file, cb) {
    checkFileType(file, cb)
  },
})

router.post('/', upload.single('image'), (req, res) => {
  res.send(`/${req.file.path}`)
})



export default router
 

ProductEditScreen.js

 import axios from 'axios'
import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import { Form, Button } from 'react-bootstrap'
import { useDispatch, useSelector } from 'react-redux'
import Message from '../components/Message'
import Loader from '../components/Loader'
import FormContainer from '../components/FormContainer'
import { listProductDetails , updateProduct} from '../actions/productActions'
import { PRODUCT_UPDATE_RESET } from '../constants/productConstants'

const ProductEditScreen = ({ match, history }) => {
  const productId = match.params.id

  const [name, setName] = useState('')
  const [price, setPrice] = useState(0)
  const [image, setImage] = useState('')
  const [countInStock, setCountInStock] = useState('')
  const [description , setDescription] = useState('')
  const [category , setCategory] = useState('')
  const [gender , setGender] = useState('')
  const [uploading , setUploading] = useState(false)

  const dispatch = useDispatch()

  const productDetails = useSelector((state) => state.productDetails)
  const { loading, error, product } = productDetails

  const productUpdate = useSelector((state) => state.productUpdate)
  const { loading:loadingUpdate, error:errorUpdate ,success:successUpdate } = productUpdate
  
  
  useEffect(() => {

    if(successUpdate) {
        dispatch({type:PRODUCT_UPDATE_RESET})
        history.push('/admin/productList')
    }
     else {
       if (!product.name || product._id !== productId) {
            dispatch(listProductDetails(productId))
          } else {
            setName(product.name)
            setPrice(product.price)
            setImage(product.image)
            setDescription(product.description)
            setCategory(product.category)
            setCountInStock(product.countInStock)
            setGender(product.gender)
     } 
      }
    }
  , [dispatch, history, productId, product ,successUpdate])

  const uploadFileHandler = async (e) => {
    const file = e.target.files[0]
    const formData = new FormData()
    formData.append('image', file)
    setUploading(true)

    try {
      const config = {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      }

      const { data } = await axios.post('/api/upload', formData, config)

      setImage(data)
      setUploading(false)
    } catch (error) {
      console.error(error)
      setUploading(false)
    }
  }


  const submitHandler = (e) => {
    e.preventDefault()
  dispatch(updateProduct({
      _id:productId ,
      name ,
      price,
      description,
      category,
      image,
      gender,
      countInStock
  }))
  } 

  return (
    <>
      <Link to='/admin/productlist' className='btn btn-light my-3'>
        Go Back
      </Link>
      <FormContainer>
        <h1>Edit Product</h1>
        {loadingUpdate amp;amp; <Loader />}
        {errorUpdate amp;amp; <Message variant='danger'>{errorUpdate}</Message>}
        {loading ? (
          <Loader />
        ) : error ? (
          <Message variant='danger'>{error}</Message>
        ) : (
          <Form onSubmit={submitHandler}>
            <Form.Group controlId='name'>
              <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 controlId='price'>
              <Form.Label>Price</Form.Label>
              <Form.Control
                type='price'
                placeholder='Enter price'
                value={price}
                onChange={(e) => setPrice(e.target.value)}
              ></Form.Control>
            </Form.Group>


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

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

            <Form.Group controlId='counInStock'>
              <Form.Label>CountInStock</Form.Label>
              <Form.Control
                type='countInStock'
                placeholder='Enter countInStock'
                value={countInStock}
                onChange={(e) => setCountInStock(e.target.value)}
              ></Form.Control>
            </Form.Group>

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

            <Form.Group controlId='gender'>
              <Form.Label>Gender</Form.Label>
              <Form.Control
                type='gender'
                placeholder='Enter gender'
                value={gender}
                onChange={(e) => setGender(e.target.value)}
              ></Form.Control>
            </Form.Group>

            <Button type='submit' variant='primary'>
              Update
            </Button>
          </Form>
        )}
      </FormContainer>
    </>
  )
}

export default ProductEditScreen
 

server.js

 import path from 'path'
import express from'express'
import  dotenv from'dotenv'
import connectDB from './config/db.js'
import colors from 'colors'
import productRoutes from './routes/productRoutes.js'
import userRoutes from './routes/userRoutes.js'
import orderRoutes from './routes/orderRoutes.js'
import uploadRoutes from './routes/uploadRoutes.js'
import {notFound , errorHandler} from './middleware/errorMiddleware.js'

dotenv.config()


connectDB()

const app = express();

app.use(express.json())

app.use((req,res,next)=>{
console.log(req.originalUrl)
    next()
})


app.use('/api/products',productRoutes)
app.use('/api/users',userRoutes)
app.use('/api/orders',orderRoutes)
app.use('/api/upload',uploadRoutes)


app.use('/api/config/paypal' , (req ,res)=>
res.send(process.env.PAYPAL_CLIENT_ID))


const __dirname = path.resolve()

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


  app.get('/', (req, res) => {
    res.send('API is running....')
  })


app.use(notFound)
app.use(errorHandler)


const PORT = process.env.PORT || 5000 
app.listen(5000 , console.log
     (`Server is running in ${process.env.NODE_ENV}mode on port ${PORT}`.yellow.bold))