노드가 이미지 업로드를 구현하는 방법에 대한 간략한 설명
이 글에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7695
15
1640
14
1393
52
1287
25
1229
29
Workerman 문서에서 파일 업로드 및 다운로드 구현
Nov 08, 2023 pm 06:02 PM
Workerman 문서에서 파일 업로드 및 다운로드를 구현하려면 특정 코드 예제가 필요합니다. 소개: Workerman은 간단하고 효율적이며 사용하기 쉬운 고성능 PHP 비동기 네트워크 통신 프레임워크입니다. 실제 개발에서 파일 업로드 및 다운로드는 일반적인 기능 요구 사항입니다. 이 기사에서는 Workerman 프레임워크를 사용하여 파일 업로드 및 다운로드를 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 파일 업로드: 파일 업로드란 로컬 컴퓨터에 있는 파일을 서버로 전송하는 작업을 말합니다. 다음이 사용됩니다
Laravel을 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법
Nov 02, 2023 pm 04:36 PM
Laravel을 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법 Laravel은 웹 애플리케이션을 보다 쉽고 효율적으로 개발할 수 있도록 다양한 기능과 도구를 제공하는 인기 있는 PHP 웹 프레임워크입니다. 일반적으로 사용되는 기능 중 하나는 파일 업로드 및 다운로드입니다. 이 글에서는 Laravel을 사용하여 파일 업로드 및 다운로드 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 파일 업로드 파일 업로드란 로컬 파일을 서버에 업로드하여 저장하는 것을 말합니다. Laravel에서는 파일 업로드를 사용할 수 있습니다.
Java 파일 업로드 예외(FileUploadException)를 해결하는 방법
Aug 18, 2023 pm 12:11 PM
Java 파일 업로드 예외(FileUploadException)를 해결하는 방법 웹 개발에서 자주 발생하는 문제 중 하나는 FileUploadException(파일 업로드 예외)입니다. 파일 크기 제한 초과, 파일 형식 불일치, 잘못된 서버 구성 등 다양한 이유로 인해 발생할 수 있습니다. 이 문서에서는 이러한 문제를 해결하는 몇 가지 방법을 설명하고 해당 코드 예제를 제공합니다. 업로드된 파일의 크기를 제한하세요. 대부분의 경우 파일 크기를 제한하세요.
gRPC를 사용하여 Golang에서 파일 업로드를 구현하는 방법은 무엇입니까?
Jun 03, 2024 pm 04:54 PM
gRPC를 사용하여 파일 업로드를 구현하는 방법은 무엇입니까? 요청 및 응답 메시지를 포함하여 지원 서비스 정의를 만듭니다. 클라이언트에서는 업로드할 파일이 열리고 청크로 분할된 다음 gRPC 스트림을 통해 서버로 스트리밍됩니다. 서버 측에서는 파일 청크가 수신되어 파일에 저장됩니다. 서버는 파일 업로드가 완료된 후 업로드 성공 여부를 나타내는 응답을 보냅니다.
Laravel에서 파일 업로드 및 처리: 사용자가 업로드한 파일 관리하기
Aug 13, 2023 pm 06:45 PM
Laravel의 파일 업로드 및 처리: 사용자 업로드 파일 관리 소개: 파일 업로드는 최신 웹 애플리케이션에서 매우 일반적인 기능 요구 사항입니다. Laravel 프레임워크에서는 파일 업로드 및 처리가 매우 간단하고 효율적입니다. 이 글에서는 파일 업로드 확인, 저장, 처리, 표시 등 Laravel에서 사용자가 업로드한 파일을 관리하는 방법을 소개합니다. 1. 파일 업로드 파일 업로드는 클라이언트에서 서버로 파일을 업로드하는 것을 말합니다. Laravel에서는 파일 업로드를 처리하기가 매우 쉽습니다. 첫 번째,
WeChat 애플릿은 사진 업로드 기능을 구현합니다.
Nov 21, 2023 am 09:08 AM
WeChat 애플릿은 사진 업로드 기능을 구현합니다. 모바일 인터넷의 발전으로 WeChat 애플릿은 사람들의 삶에 없어서는 안될 부분이 되었습니다. WeChat 미니 프로그램은 다양한 애플리케이션 시나리오를 제공할 뿐만 아니라 이미지 업로드 기능을 포함한 개발자 정의 기능도 지원합니다. 이 기사에서는 WeChat 애플릿에서 이미지 업로드 기능을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 1. 준비 작업 코드 작성을 시작하기 전에 WeChat 개발자 도구를 다운로드하여 설치하고 WeChat 개발자로 등록해야 합니다. 동시에 WeChat도 이해해야 합니다.
PI 노드 교육 : PI 노드 란 무엇입니까? Pi 노드를 설치하고 설정하는 방법은 무엇입니까?
Mar 05, 2025 pm 05:57 PM
Pinetwork 노드에 대한 자세한 설명 및 설치 안내서이 기사에서는 Pinetwork Ecosystem을 자세히 소개합니다. Pi 노드, Pinetwork 생태계의 주요 역할을 수행하고 설치 및 구성을위한 전체 단계를 제공합니다. Pinetwork 블록 체인 테스트 네트워크가 출시 된 후, PI 노드는 다가오는 주요 네트워크 릴리스를 준비하여 테스트에 적극적으로 참여하는 많은 개척자들의 중요한 부분이되었습니다. 아직 Pinetwork를 모른다면 Picoin이 무엇인지 참조하십시오. 리스팅 가격은 얼마입니까? PI 사용, 광업 및 보안 분석. Pinetwork 란 무엇입니까? Pinetwork 프로젝트는 2019 년에 시작되었으며 독점적 인 Cryptocurrency Pi Coin을 소유하고 있습니다. 이 프로젝트는 모든 사람이 참여할 수있는 사람을 만드는 것을 목표로합니다.
PHP를 사용하여 FTP 파일 업로드 진행 표시줄을 구현하는 방법
Jul 30, 2023 pm 06:51 PM
PHP를 사용하여 FTP 파일 업로드 진행 표시줄을 구현하는 방법 1. 배경 소개 웹사이트 개발에서 파일 업로드는 일반적인 기능입니다. 대용량 파일을 업로드하는 경우 사용자 경험을 개선하기 위해 사용자에게 파일 업로드 프로세스를 알 수 있도록 업로드 진행률 표시줄을 표시해야 하는 경우가 많습니다. 이 기사에서는 PHP를 사용하여 FTP 파일 업로드 진행률 표시줄 기능을 구현하는 방법을 소개합니다. 2. FTP 파일 업로드 진행률 표시줄 구현의 기본 아이디어 FTP 파일 업로드의 진행률 표시줄은 일반적으로 업로드된 파일의 크기와 업로드된 파일의 크기를 계산하여 계산됩니다.
