노드가 이미지 업로드를 구현하는 방법에 대한 간략한 설명
- 青灯夜游앞으로
- 2021-03-05 10:02:513716검색
이 글에서는 node를 통해 이미지 파일을 업로드하는 방법을 소개합니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.
관련 추천: "nodejs Tutorial"
웹 개발에서 파일 업로드는 매우 중요한 문제입니다. 특히 이미지 업로드와 확장된 "진행률 표시줄", "파일 크기"뿐만 아니라 유명한 "교차 도메인" 문제.
이 데모는 이미지 업로드를 보여주며, 서버 코드는 node입니다.
Front-end 부분
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<input type="file" name="file" accept="image/*" onchange="changeImg(event)"/>
<button onclick="submit()">上传</button>
<script>
let file = ''
let fileName = ''
function submit() {
let data = new FormData()
data.append('imgName', fileName)
data.append('img', file)
axios({
method: 'post',
timeout: 2000,
url: 'http://localhost:8081/postApi',
data: data
})
.then(response => {
console.log(response.data)
})
.catch(error => {
console.log(error)
})
}
function changeImg(e) {
file = e.target.files.item(0) //只能选择一张图片
// 如果不选择图片
if (file === null) {
return
}
fileName = file.name
}
</script>
</body>
</html>
Send request using axios——사실 여기서는 또 다른 "도메인 간 요청 방법"(vue-resource)을 사용할 수도 있는데 여기서 생각해 봤습니다. 또는 백엔드 설정 교차 도메인 방법을 사용하세요.
백엔드 부분파일 업로드 요청을 효율적이고 원활하게 구문 분석하기 위해 먼저
라이브러리를 소개합니다.npm install formidable --save
formidableformidable 스트리밍 파서가 이를 처리 파일로 만듭니다. 즉, 업로드되는 데이터 블록을 수신하여 구문 분석하고 특정 부분을 뱉어낼 수 있다는 의미입니다. 스트림에 익숙한 친구들은 이를 잘 이해할 것입니다. 이 방법은 속도가 빠를 뿐만 아니라, 대용량 버퍼링이 필요하기 때문에 메모리 확장이 발생하지 않으며, 동영상과 같은 대용량 파일도 프로세스에 부담을 주지 않습니다. 물론 업로드된 이미지를 저장하려면 myImage 파일을 생성해야 합니다. 그런 다음 IncomingForm 인스턴스 양식을 생성하고 저장 경로를 myImage 폴더로 설정합니다. 코드는 다음과 같습니다.
const http=require('http');
const formidable=require('formidable');
var server=http.createServer(function(req,res){
// 后端设置跨域
res.setHeader('Access-Control-Allow-Origin','*');
res.setHeader('Access-Control-Allow-Headers','Content-Type');
res.setHeader('Content-Type','application/json');
switch(req.method){
case 'OPTIONS':
res.statusCode=200;
res.end();
break;
case 'POST':
upload(req,res);
break;
}
})
function upload(req,res){
if(!isFormData(req)){
res.statusCode=400;
res.end('请求错误,请使用multipart/form-data格式');
return;
}
var form=new formidable.IncomingForm();
// 设置上传图片保存文件
form.uploadDir='./myImage';
form.keepExtensions=true;
form.on('field',(field,value)=>{
console.log(field);
console.log(value);
})
form.on('end',()=>{
res.end('上传完成!');
})
form.parse(req);
}
function isFormData(req){
let type=req.headers['content-type'] || '';
return type.includes('multipart/form-data');
}
server.listen(8081,function(){
console.log('port is on 8081');
})
6, 7, 8행의 setHeader 행이 특히 중요합니다. 이것이 백엔드 크로스 도메인의 핵심입니다! 업로드 진행상황 추가
이것도 저희가 자주 사용하고 보고싶은 내용이에요! 이는 사용자에게 훌륭한 경험을 제공할 것입니다.
위 코드에 form.on('progress',(bytesReceived,bytesExpected)=>{
var precent=Math.floor(bytesReceived/bytesExpected*100);
console.log(precent);
})
를 추가한 다음 진행 상황을 사용자의 브라우저로 다시 보내면 됩니다. formidable
formidable 모듈은 이미지와 비디오 업로드 및 인코딩을 구현합니다. GB 수준 업로드 데이터 처리를 지원하고 여러 클라이언트 데이터 제출을 지원합니다. 테스트 범위가 매우 높으며 생산 환경에서 사용하기에 매우 적합합니다.
강력한 모듈의 메서드 및 속성 - 주변:Formidable.incomingForm()
다음 메서드를 통해 양식을 만들 수 있습니다.
var form = new formidable.IncomingForm()；
인코딩 속성을 통해 필드 인코딩을 설정합니다.
form.encoding='utf-8';
업로드 시 임시 파일 저장 공간을 설정합니다. uploadDir을 통한 파일 업로드된 임시 파일이 저장되는 기본 위치는 os.tmpDir();
form.uploadDir='/tmp/';
keepExtensions 속성을 사용하여 파일 업로드 시 임시 파일의 파일 이름에 확장자를 포함할지 여부를 설정할 수 있습니다. 이 값이 true이면 확장이 포함되고, 그렇지 않으면 확장이 포함되지 않습니다.
form.keepExtensions=false
더 중요한 "파싱 방법"도 있습니다: node.js의 요청 요청에 포함된 양식으로 제출된 데이터를 구문 분석하는 것입니다. cb는 요청 처리를 위한 콜백 함수입니다(필수는 아님).
form.parse(req,function(err,fields,files){
//...
});
더 많은 프로그래밍 관련 지식을 보려면
프로그래밍 비디오위 내용은 노드가 이미지 업로드를 구현하는 방법에 대한 간략한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!