파일업로드 하면 오류가 발생합니다.
Failed to load resource: the server responded with a status of 404 (Not Found) createError.js:16 Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.handleLoad (xhr.js:61:1)
Uncaught (in promise) Error: Request failed with status code 404 at createError (createError.js:16:1) at settle (settle.js:17:1) at XMLHttpRequest.handleLoad (xhr.js:61:1)
콘솔창에 위와 같이 나옵니다.
서버포트 5000번이 맥에서 안되서 5001포트 사용하였고 클라이언트는 3000번포트
프록시 문제인가요? 아니면 경로 문제인가요? 둘다 확인했는데 로그인 정상으로 되고
업로드에서만 문제가 발생합니다.
FileUpload.js
import React, { useState} from 'react'
import Dropzone from 'react-dropzone'
import { Icon } from 'antd';
import axios from 'axios';
function FileUpload() {
const [Images, setImages] = useState([]);
const dropHandler = (files) => {
let formData = new FormData();
const config = {
header: {'content-type': 'multipart/fomr-data'}
}
formData.append("file",files[0]);
console.log("1111");
axios.post('/api/product/image',formData , config)
.then(response => {
if(response.data.success) {
console.log(response.data);
setImages(...Images, response.data.filePath)
} else {
alert('파일을 저장하는데 실패했습니다.')
}
})
}
return (
<div style={{ display:'flex', justifyContent:'space-between'}}>
<Dropzone onDrop={dropHandler}>
{({ getRootProps, getInputProps}) => (
<section>
<div
style={{
width:300, height:240, border: '1px solid lightgray',
display:'flex', alignItems: 'center', justifyContent:'center'
}}
{...getRootProps()}>
<input {...getInputProps()}/>
<Icon type = "plus" style={{ fontSize:'3rem'}} />
</div>
</section>
)}
</Dropzone>
<div style={{ display: 'flex', width: '350px', height: '240px', overflowX: 'scroll'}}>
{Images.map((image, index) => (
<div key={index}>
<img style={{ minWidth:'300px', width:'300px', height: '240px'}}
src={`//localhost:5001/${image}`} />
</div>
))}
</div>
</div>
)
}
export default FileUpload
index.js
app.use('/api/users', require('./routes/users'));
app.post('/api/product', require('./routes/product'));
product.js 소스
const express = require('express');
const router = express.Router();
const multer = require('multer');
//=================================
// Product
//=================================
var storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/')
},
filename: function (req, file, cb) {
cb(null, `${Date.now()}_${file.originalname}`)
}
})
var upload = multer({ storage: storage }).single("file")
router.post('/image', (req,res) => {
// 가져온 이미지를 저장을 해주면 된다.
upload(req,res,err => {
if(err) {
return req.json({success: false,err});
}
return res.json({success:true, filePath:res.req.file.path ,fileName: res.req.file.filename})
});
})