node.js 는 express-fileupload 미들웨어 를 사용 하여 파일 업 로드 를 실현 합 니 다.
9098 단어 nodeexpress-fileupload파일 업로드
항목 초기 화
mkdir react-file-upload //
cd react-file-upload
npm init -y // npm package.json
npm i express express-fileupload
npm i -D nodemon concurrently // ( )
{
"main": "server.js",
"script" : {
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": " concurrently \"npm run server\" \"npm run client\" "
}
}
server.js 파일 을 작성 하 겠 습 니 다.
const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();
// express-fileupload
app.use( fileUpload() );
// /upload post
app.post('/upload', (req, res) => {
// req files express-fileupload !? ( )
// files 400
if(req.files === null){
return res.status(400).json({msg:'no file uploaded'});
}
//
// file formData.append('file', file)
const file = req.files.file;
// 500
file.mv(`${__dirname}/client/public/uploads/${file.name}`, err => {
if(err){
console.error(err);
return res.status(500).send(err);
}
// json
//
// react
// public uploads
res.json({fileName: file.name, filePath: `uploads/${file.name}`});
});
});
app.listen(5000,() => {console.log('Server started...')});
npm run server
클 라 이언 트 초기 화
그리고 클 라 이언 트 를 만 듭 니 다.create-react-app 비계 로 프로젝트 를 초기 화 합 니 다.
npx create-react-app client
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<!-- css -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" rel="external nofollow" />
<title>React File Uploader</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- js -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
각각 3 개의 구성 요 소 를 작성 해 야 합 니 다.
import React, { useState } from 'react'
import axios from 'axios'
import Message from './Message'
import Progress from './Progress'
const FileUpload = () => {
return (
<div>
{message ? <Message msg={message} /> : null}
<form onSubmit={onSubmit}>
<div className="custom-file mb-4">
<input type="file" className="custom-file-input" id="customFile" onChange={onChange}></input>
<label className="custom-file-label" htmlFor="customFile">{filename}</label>
</div>
<Progress percentage={uploadedPercentage}></Progress>
<input className="btn btn-primary btn-block mt-4" type="submit" value="Upload"></input>
</form>
{
uploadedFile ?
<div className="row mt-5">
<div className="col-md-6 m-auto">
<h3 className="text-center">{uploadedFile.name}</h3>
<img style={{width:'100%'}} src={uploadedFile.filePath} alt=""></img>
</div>
</div> :
<p>nothing uploaded yet...</p>
}
</div>
)
}
export default FileUpload
import React from 'react'
import PropTypes from 'prop-types'
const Message = ({msg}) => {
console.log('her')
return (
<div className="alert alert-info alert-dismissible fade show" role="alert">
{msg}
<button type="button" className="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
)
}
Message.propTypes = {
msg: PropTypes.string.isRequired,
}
export default Message
import React from 'react'
import PropTypes from 'prop-types'
const Progress = ({percentage}) => {
return (
<div className="progress">
<div className="progress-bar" role="progressbar"
style={{ width: `${percentage}%` }}
aria-valuenow={percentage} aria-valuemin="0" aria-valuemax="100">{percentage}%</div>
</div>
)
}
Progress.propTypes = {
percentage: PropTypes.number.isRequired,
}
export default Progress
지금까지 모든 기능 구성 요소 가 완료 되 었 습 니 다.
npm run dev
마지막 으로 git 주소 첨부Git
node.js 가 express-fileupload 미들웨어 를 사용 하여 파일 업 로드 를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 node.js 파일 업로드 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Express.js에서 오류를 처리하는 간단한 방법Express에서 오류를 처리하는 여러 가지 방법이 있습니다. 이를 수행하는 일반적인 방법은 기본 익스프레스 미들웨어를 사용하는 것입니다. 또 다른 방법은 컨트롤러 내부의 오류를 처리하는 것입니다. 이러한 처리 방식...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
