#javascript #reactjs #file-upload #path #http-status-code-404
Вопрос:
я уже загрузил свои изображения со своего ноутбука , и они были загружены и показаны сначала , но затем я получил эту ошибку, путь был в порядке, но я не знаю, что именно произошло, должен ли я что-то изменить в своем коде ? я уже следил за репетитором , и с ним все было в порядке, у меня есть код здесь и скриншоты .
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))