浅谈node实现图片上传的方法
本篇文章给大家介绍一下node实现图片文件上传的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
相关推荐：《nodejs 教程》
在web开发中，文件上传是一个很重要的问题，尤其是图片上传，以及由此延伸的“进度条”、“文件大小”、以及著名的“跨域”等问题。
本demo演示的是图片的上传，服务器代码为node。
前端部分
<!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>采用axios发送请求 —— 其实我们这里也可以采用另一种“跨域请求方式”（vue-resource），但这里我想了想。还是采用 后端设置跨域 的方式。
后端部分
这是本文要介绍的重点，为了用高效流畅的方式来解析文件上传请求，我们先引入formidable库：
npm install formidable --save
formidable的流式解析器让它成为了处理文件上传的绝佳选择，也就是说它能随着数据块的上传接收它们，解析它们，并吐出特定的部分，相信熟悉流的朋友会很好理解。这种方式不仅快，还不会因为需要大量缓冲而导致内存膨胀，即便像视频这种大型文件，也不会把进程压垮。
当然，我们要创建myImage文件，用于存放上传的图片，接着，我们创建一个IncomingForm实例form，并且设置存放路径为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模块的方法和属性 —— 围绕：Formidable.incomingForm()
可以通过该方法创建一个form表单：
var form = new formidable.IncomingForm()；
通过encoding属性设置字段编码
form.encoding='utf-8';
通过uploadDir设置上传文件时临时文件存放的位置，默认上传的临时文件存放的位置为os.tmpDir();
form.uploadDir='/tmp/';
通过keepExtensions属性可以设置文件上传时临时文件的文件名是否包括扩展名。如果该值为真，即为包括扩展名，否则，就不包括扩展名。
form.keepExtensions=false
还有比较重要的“ parse方法 ”：解析node.js中request请求中包含的form表单提交的数据。cb为处理请求的回调函数（不必须）。
form.parse(req,function(err,fields,files){
//...
});更多编程相关知识，请访问：编程视频！！
Atas ialah kandungan terperinci 浅谈node实现图片上传的方法. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Laksanakan muat naik dan muat turun fail dalam dokumen Workerman
Nov 08, 2023 pm 06:02 PM
Untuk melaksanakan muat naik dan muat turun fail dalam dokumen Workerman, contoh kod khusus diperlukan. Pengenalan: Workerman ialah rangka kerja komunikasi rangkaian tak segerak PHP berprestasi tinggi yang ringkas, cekap dan mudah digunakan. Dalam pembangunan sebenar, muat naik dan muat turun fail adalah keperluan fungsi biasa Artikel ini akan memperkenalkan cara menggunakan rangka kerja Workerman untuk melaksanakan muat naik dan muat turun fail, dan memberikan contoh kod khusus. 1. Muat naik fail: Muat naik fail merujuk kepada operasi memindahkan fail pada komputer tempatan ke pelayan. Yang berikut digunakan
Cara menggunakan Laravel untuk melaksanakan fungsi muat naik dan muat turun fail
Nov 02, 2023 pm 04:36 PM
Cara menggunakan Laravel untuk melaksanakan fungsi muat naik dan muat turun fail Laravel ialah rangka kerja Web PHP popular yang menyediakan pelbagai fungsi dan alatan untuk menjadikan pembangunan aplikasi Web lebih mudah dan cekap. Salah satu fungsi yang biasa digunakan ialah muat naik dan muat turun fail. Artikel ini akan memperkenalkan cara menggunakan Laravel untuk melaksanakan fungsi muat naik dan muat turun fail, serta menyediakan contoh kod khusus. Muat naik fail Muat naik fail merujuk kepada memuat naik fail tempatan ke pelayan untuk penyimpanan. Dalam Laravel kita boleh menggunakan muat naik fail
Bagaimana untuk menyelesaikan pengecualian muat naik fail Java (FileUploadException)
Aug 18, 2023 pm 12:11 PM
Cara menyelesaikan pengecualian muat naik fail Java (FileUploadException Satu masalah yang sering dihadapi dalam pembangunan web ialah FileUploadException (pengecualian muat naik fail). Ia mungkin berlaku disebabkan oleh pelbagai sebab seperti saiz fail melebihi had, format fail tidak sepadan atau konfigurasi pelayan yang salah. Artikel ini menerangkan beberapa cara untuk menyelesaikan masalah ini dan menyediakan contoh kod yang sepadan. Hadkan saiz fail yang dimuat naik Dalam kebanyakan senario, hadkan saiz fail
Bagaimana untuk menggunakan gRPC untuk melaksanakan muat naik fail di Golang?
Jun 03, 2024 pm 04:54 PM
Bagaimana untuk melaksanakan muat naik fail menggunakan gRPC? Buat definisi perkhidmatan sokongan, termasuk permintaan dan mesej respons. Pada klien, fail yang hendak dimuat naik dibuka dan dibahagikan kepada beberapa bahagian, kemudian distrim ke pelayan melalui aliran gRPC. Di bahagian pelayan, ketulan fail diterima dan disimpan ke dalam fail. Pelayan menghantar respons selepas muat naik fail selesai untuk menunjukkan sama ada muat naik berjaya.
Memuat Naik dan Memproses Fail dalam Laravel: Mengurus Fail Yang Dimuat Naik Pengguna
Aug 13, 2023 pm 06:45 PM
Memuat Naik dan Memproses Fail dalam Laravel: Mengurus Fail Yang Dimuat Naik Pengguna Pengenalan: Muat naik fail ialah keperluan fungsi yang sangat biasa dalam aplikasi web moden. Dalam rangka kerja Laravel, muat naik dan pemprosesan fail menjadi sangat mudah dan cekap. Artikel ini akan memperkenalkan cara mengurus fail yang dimuat naik pengguna dalam Laravel, termasuk pengesahan, penyimpanan, pemprosesan dan paparan muat naik fail. 1. Muat naik fail Muat naik fail merujuk kepada memuat naik fail daripada klien ke pelayan. Dalam Laravel, muat naik fail sangat mudah dikendalikan. pertama,
Applet WeChat melaksanakan fungsi muat naik imej
Nov 21, 2023 am 09:08 AM
Applet WeChat melaksanakan fungsi muat naik gambar Dengan perkembangan Internet mudah alih, applet WeChat telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Program mini WeChat bukan sahaja menyediakan pelbagai senario aplikasi, tetapi juga menyokong fungsi yang ditentukan oleh pembangun, termasuk fungsi muat naik imej. Artikel ini akan memperkenalkan cara untuk melaksanakan fungsi muat naik imej dalam applet WeChat dan memberikan contoh kod khusus. 1. Kerja persediaan Sebelum mula menulis kod, kita perlu memuat turun dan memasang alat pembangun WeChat dan mendaftar sebagai pembangun WeChat. Pada masa yang sama, anda juga perlu memahami WeChat
PI Node Teaching: Apakah nod pi? Bagaimana cara memasang dan menyediakan nod pi?
Mar 05, 2025 pm 05:57 PM
Penjelasan dan Panduan Pemasangan Terperinci untuk Pinetwork Nodes Artikel ini akan memperkenalkan ekosistem pinetwork secara terperinci - nod pi, peranan utama dalam ekosistem pinetwork, dan menyediakan langkah -langkah lengkap untuk pemasangan dan konfigurasi. Selepas pelancaran Rangkaian Ujian Blockchain Pinetwork, nod PI telah menjadi bahagian penting dari banyak perintis yang aktif mengambil bahagian dalam ujian, bersiap sedia untuk pelepasan rangkaian utama yang akan datang. Jika anda tidak tahu kerja pinet, sila rujuk apa itu picoin? Berapakah harga untuk penyenaraian? Penggunaan PI, perlombongan dan analisis keselamatan. Apa itu Pinetwork? Projek Pinetwork bermula pada tahun 2019 dan memiliki syiling pi cryptocurrency eksklusifnya. Projek ini bertujuan untuk mewujudkan satu yang semua orang boleh mengambil bahagian
Bagaimana untuk melaksanakan bar kemajuan muat naik fail FTP menggunakan PHP
Jul 30, 2023 pm 06:51 PM
Cara menggunakan PHP untuk melaksanakan bar kemajuan muat naik fail FTP 1. Pengenalan latar belakang Dalam pembangunan laman web, muat naik fail adalah fungsi biasa. Untuk muat naik fail besar, untuk meningkatkan pengalaman pengguna, kami selalunya perlu memaparkan bar kemajuan muat naik kepada pengguna untuk memberitahu pengguna proses muat naik fail. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi bar kemajuan muat naik fail FTP. 2. Idea asas untuk melaksanakan bar kemajuan muat naik fail FTP Bar kemajuan muat naik fail FTP biasanya dikira dengan mengira saiz fail yang dimuat naik dan saiz fail yang dimuat naik.
