Express+multer는 노드 이미지를 업로드하는 특정 단계를 구현합니다.
이번에는 express+multer를 사용하여 노드 이미지를 업로드하는 구체적인 단계를 알려드리겠습니다. node 이미지 업로드를 구현하기 위한 express+multer의 주의사항은 무엇인가요?
다음은 node에서 이미지 업로드 기능을 구현하기 위해 express+multer를 사용하는 방법을 소개합니다.
프런트엔드에서는 ajax를 사용하여 이미지를 비동기적으로 업로드하고, 파일 입력을 통해 이미지를 업로드하고, formdata 객체를 사용하여 이미지 데이터를 처리하고, 서버에 게시합니다
업로드 라우팅 인터페이스를 처리하려면 노드에서 multer
middleware를 사용하세요. 멀터 문서
package.jsonhtml 부분
<body> <p class="form-group"> <label>File input:</label> <input type="file" name="file" id="file"> <p id="result"></p> <img id="img" src=""> </p> <button id="upload" class="btn btn-default">提交</button> </body>
js 부분
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
//上传图片的业务逻辑函数
function uploadFile(){
//上传图片的input
var file = document.getElementById("file")
//因为准备用post提交，又因为图片的内容比较大，所以我们选择使用formdata来承载数据
//创建formdata对象
var formData = new FormData();
//给formdata对象中放入数据(键值对的方式)
formData.append('file',file.files[0]);
//提交请求
$.ajax({
url: '/upload',//请求路径
type: 'POST',
data: formData,
contentType: false,//为了让浏览器根据传入的formdata来判断contentType
processData: false,//同上
success: function(data){
if(200 === data.code) {
$('#result').html("上传成功！");
$('#img').attr('src',data.data);
} else {
$('#result').html("上传失败！");
}
console.log(2)
},
error: function(){
$("#result").html("与服务器通信发生错误");
}
});
console.log(1)
}
//给按钮添加点击事件
function postPage() {
//上传按钮
var uploada = document.getElementById('upload');
uploada.addEventListener("click",function () {
uploadFile();
},false);
}
window.onload = function () {
postPage();
}
</script>NodeJS 논리 코드
const http = require('http')
const path = require('path')
const express = require('express')
//是nodejs中处理multipart/form-data数据格式(主要用在上传功能中)的中间件
//文档：https://github.com/expressjs/multer/blob/master/doc/README-zh-cn.md
const multer = require('multer')
const app = express()
//配置express的静态目录
app.use(express.static(path.join(dirname, 'public')));
app.get('/',(req,res)=>{
res.sendFile(dirname+'/index.html')
})
//配置diskStorage来控制文件存储的位置以及文件名字等
var storage = multer.diskStorage({
//确定图片存储的位置
destination: function (req, file, cb){
cb(null, './public/uploadImgs')
},
//确定图片存储时的名字,注意，如果使用原名，可能会造成再次上传同一张图片的时候的冲突
filename: function (req, file, cb){
cb(null, Date.now()+file.originalname)
}
});
//生成的专门处理上传的一个工具，可以传入storage、limits等配置
var upload = multer({storage: storage});
//接收上传图片请求的接口
app.post('/upload', upload.single('file'), function (req, res, next) {
//图片已经被放入到服务器里,且req也已经被upload中间件给处理好了（加上了file等信息）
//线上的也就是服务器中的图片的绝对地址
var url = '/uploadImgs/' + req.file.filename
res.json({
code : 200,
data : url
})
});
http.createServer(app).listen(3000,()=>{
console.log('server is listening')
})기분은 좋은데 왜 블로그 파크가 나를 위해 홈페이지를 제거했는지 모르겠습니다....
再发一次，if(delete){
alert('Never publish anything again.')
}else{
alert(1)
}이 기사의 사례를 읽으신 후 방법을 마스터하신 것 같습니다. 더 흥미로운 콘텐츠를 보려면 결제하세요. PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!
추천 자료:
위 내용은 Express+multer는 노드 이미지를 업로드하는 특정 단계를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7412
15
1359
52
76
11
20
19
FastAPI에서 파일 업로드 및 처리를 구현하는 방법
Jul 28, 2023 pm 03:01 PM
FastAPI에서 파일 업로드 및 처리를 구현하는 방법 FastAPI는 사용하기 쉽고 강력한 최신 고성능 웹 프레임워크로 파일 업로드 및 처리를 기본적으로 지원합니다. 이 기사에서는 FastAPI 프레임워크에서 파일 업로드 및 처리 기능을 구현하는 방법을 알아보고 특정 구현 단계를 설명하는 코드 예제를 제공합니다. 먼저, 필수 라이브러리와 모듈을 가져와야 합니다: fromfastapiimportFastAPI,UploadF
nvm에서 노드를 삭제하는 방법
Dec 29, 2022 am 10:07 AM
nvm을 사용하여 노드를 삭제하는 방법: 1. "nvm-setup.zip"을 다운로드하여 C 드라이브에 설치합니다. 2. "nvm -v" 명령을 통해 환경 변수를 구성하고 버전 번호를 확인합니다. install" 명령 노드 설치; 4. "nvm uninstall" 명령을 통해 설치된 노드를 삭제합니다.
QQ Music에 가사를 업로드하는 방법
Feb 23, 2024 pm 11:45 PM
디지털 시대가 도래하면서 음악 플랫폼은 사람들이 음악을 얻는 주요 수단 중 하나가 되었습니다. 하지만 가끔 노래를 듣다 보면 가사가 없다는 것을 발견하게 되는데, 이는 매우 혼란스럽습니다. 많은 사람들은 노래를 들을 때 가사가 표시되어 노래의 내용과 감정을 더 잘 이해할 수 있기를 바랍니다. 중국 최대 음악 플랫폼 중 하나인 QQ 뮤직은 사용자에게 가사 업로드 기능을 제공하여 사용자가 음악을 더 잘 즐기고 노래의 의미를 느낄 수 있도록 합니다. QQ뮤직에 가사를 업로드하는 방법은 다음과 같습니다. 첫 번째
Kugou에 자신의 음악을 업로드하는 간단한 단계
Mar 25, 2024 pm 10:56 PM
1. Kugou Music을 열고 프로필 사진을 클릭하세요. 2. 오른쪽 상단의 설정 아이콘을 클릭하세요. 3. [음악작품 업로드]를 클릭하세요. 4. [작품 업로드]를 클릭하세요. 5. 노래를 선택하고 [다음]을 클릭하세요. 6. 마지막으로 [업로드]를 클릭하세요.
Express를 사용하여 노드 프로젝트에서 파일 업로드를 처리하는 방법
Mar 28, 2023 pm 07:28 PM
파일 업로드를 처리하는 방법은 무엇입니까? 다음 글에서는 Express를 사용하여 노드 프로젝트에서 파일 업로드를 처리하는 방법을 소개하겠습니다. 도움이 되길 바랍니다.
Win10 컴퓨터에서 느린 업로드 속도 문제를 해결하는 방법
Jul 01, 2023 am 11:25 AM
Win10 컴퓨터의 느린 업로드 속도를 해결하는 방법은 무엇입니까? 컴퓨터를 사용하다 보면 우리 컴퓨터의 파일 업로드 속도가 매우 느리다는 것을 느낄 수 있습니다. 그렇다면 현재 상황은 어떠한가요? 사실 이는 컴퓨터의 기본 업로드 속도가 20%이기 때문에 업로드 속도가 매우 느려지기 때문입니다. 많은 친구들이 C 드라이브를 포맷하는 단계를 자세히 정리했습니다. 아래 Win11에 관심이 있으시면 아래를 살펴보세요! Win10의 느린 업로드 속도에 대한 해결 방법 1. win+R을 눌러 실행을 호출하고 gpedit.msc를 입력한 후 Enter를 누릅니다. 2. 관리 템플릿을 선택하고 네트워크--Qos 패킷 스케줄러를 클릭한 다음 제한을 두 번 클릭하여 대역폭을 예약합니다. 3. 활성화됨을 선택하면
컴퓨터 업로드 속도를 향상시키는 방법
Jan 15, 2024 pm 06:51 PM
업로드 속도가 많이 느려지나요? 이것은 많은 친구들이 자신의 컴퓨터에 업로드할 때 겪게 되는 문제라고 생각합니다.컴퓨터를 사용하여 파일을 전송할 때 네트워크가 불안정하면 업로드 속도가 매우 느려집니다. 그러면 어떻게 네트워크 업로드 속도를 높일 수 있습니까? 아래에서 편집자는 느린 컴퓨터 업로드 속도 문제를 해결하는 방법을 알려줄 것입니다. 네트워크 속도와 관련하여 웹 페이지 열기 속도, 다운로드 속도 및 업로드 속도도 매우 중요하다는 것을 우리 모두 알고 있습니다. 특히 일부 사용자는 네트워크 디스크에 파일을 업로드해야 하는 경우가 많으므로 업로드 속도가 빠르면 비용이 절약됩니다. 돈이 많이 부족해요. 업로드 속도가 느리면 어떻게 해야 하나요? 아래에서 편집기는 느린 컴퓨터 업로드 속도를 처리하는 방법에 대한 사진과 텍스트를 제공합니다. 느린 컴퓨터 업로드 속도 문제를 해결하는 방법은 무엇입니까? "시작-실행" 또는 "창 키"를 클릭하십시오.
사진을 찍고 컴퓨터에 업로드하는 방법
Jan 16, 2024 am 10:45 AM
컴퓨터에 카메라가 장착되어 있으면 사진을 찍을 수 있지만 일부 사용자는 여전히 사진을 찍고 업로드하는 방법을 모릅니다. 이제 컴퓨터에서 사진을 찍는 방법을 자세히 소개하겠습니다. 사용자가 원하는 곳에 사진을 업로드할 수 있도록 말이죠. 사진을 찍어 컴퓨터에 업로드하는 방법 1. Mac 컴퓨터 1. Finder를 열고 왼쪽에 있는 애플리케이션을 클릭합니다. 2. 앱을 연 후 카메라 애플리케이션을 클릭하세요. 3. 아래 사진 버튼을 클릭하시면 됩니다. 2. Windows 컴퓨터 1. 아래 검색창을 열고 카메라를 입력하세요. 2. 검색된 애플리케이션을 실행하세요. 3. 옆에 있는 사진 버튼을 클릭하세요.
