NodeJS實(shí)現(xiàn)圖片上傳代碼(Express)
更新時(shí)間：2017年06月30日 14:54:11 作者：Fly_Elephant
本篇文章主要介紹了NodeJS實(shí)現(xiàn)圖片上傳代碼(Express) ，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
文件上傳是每個(gè)網(wǎng)站不可避免的，最近需要做些上傳圖片的功能，主要解決兩個(gè)問(wèn)題，一個(gè)是文件上傳樣式和服務(wù)端路徑保存，功能很簡(jiǎn)單，做起來(lái)倒是沒(méi)那么簡(jiǎn)單，先從最簡(jiǎn)單的頁(yè)面的上傳頁(yè)面的樣式開(kāi)始。
頁(yè)面樣式
Html頁(yè)面默認(rèn)的上傳的是比較難看的，需要重做一個(gè)背景圖片，通過(guò)背景圖片添加上傳的圖片:
上傳圖片樣式:
<div class="upload-container"> <input type="file" name="fileToUpload" id="fileToUpload" class="fileupload" /> </div>
CSS樣式:
.upload-container {
background-image: url(../../images/rv/add.jpg);
background-repeat: no-repeat;
width: 180px;
height: 200px;
padding-bottom: 10px;
display: inline-block;
vertical-align: middle;
.fileupload {
opacity: 0;
filter: alpha(opacity=0);
width: 200px;
height: 200px;
}
}
Html點(diǎn)擊上傳有兩種比較常用的方式iFrame上傳和Ajax上傳，本文采用了Ajax上傳是HTML5提出了XMLHttpRequest對(duì)象的第二版，傳遞文件數(shù)據(jù)主要是通過(guò)FormData實(shí)現(xiàn):
$('.fileupload').change(function(event) {
/* Act on the event */
if ($('.fileupload').val().length) {
var fileName = $('.fileupload').val();
var extension = fileName.substring(fileName.lastIndexOf('.'), fileName.length).toLowerCase();
if (extension == ".jpg" || extension == ".png") {
var data = new FormData();
data.append('upload', $('#fileToUpload')[0].files[0]);
$.ajax({
url: 'apply/upload',
type: 'POST',
data: data,
cache: false,
contentType: false, //不可缺參數(shù)
processData: false, //不可缺參數(shù)
success: function(data) {
console.log(data);
},
error: function() {
console.log('error');
}
});
}
}
});
服務(wù)端保存
NodeJS服務(wù)端保存需要使用了第三方插件node-formidable，npm安裝地址:
npm install formidable@latest
上傳圖片
var cacheFolder = 'public/images/uploadcache/';<br>exports.upload = function(req, res) {
var currentUser = req.session.user;
var userDirPath =cacheFolder+ currentUser.id;
if (!fs.existsSync(userDirPath)) {
fs.mkdirSync(userDirPath);
}
var form = new formidable.IncomingForm(); //創(chuàng)建上傳表單
form.encoding = 'utf-8'; //設(shè)置編輯
form.uploadDir = userDirPath; //設(shè)置上傳目錄
form.keepExtensions = true; //保留后綴
form.maxFieldsSize = 2 * 1024 * 1024; //文件大小
form.type = true;
var displayUrl;
form.parse(req, function(err, fields, files) {
if (err) {
res.send(err);
return;
}
var extName = ''; //后綴名
switch (files.upload.type) {
case 'image/pjpeg':
extName = 'jpg';
break;
case 'image/jpeg':
extName = 'jpg';
break;
case 'image/png':
extName = 'png';
break;
case 'image/x-png':
extName = 'png';
break;
}
if (extName.length === 0) {
res.send({
code: 202,
msg: '只支持png和jpg格式圖片'
});
return;
} else {
var avatarName = '/' + Date.now() + '.' + extName;
var newPath = form.uploadDir + avatarName;
displayUrl = UPLOAD_FOLDER + currentUser.id + avatarName;
fs.renameSync(files.upload.path, newPath); //重命名
res.send({
code: 200,
msg: displayUrl
});
}
});
};
不同用戶(hù)上傳置放在不同的位置，根據(jù)需求來(lái)設(shè)置，當(dāng)然也有可以每張圖片都給不同的id編號(hào)，推薦第三方uuid插件:https://github.com/broofa/node-uuid
文件重命名:
fs.renameSync(files.upload.path, newPath); //重命名
文件上傳進(jìn)度:
form.on('progress', function(bytesReceived, bytesExpected) {
});
node-formidable有很多官方API還有很多設(shè)置的選項(xiàng)，本文根據(jù)需求設(shè)置了幾項(xiàng)，有額外需求的可以參考官方地址~
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- node+axios實(shí)現(xiàn)服務(wù)端文件上傳示例
- 利用node+koa+axios實(shí)現(xiàn)圖片上傳和回顯功能
- 詳解Vue+axios+Node+express實(shí)現(xiàn)文件上傳(用戶(hù)頭像上傳)
- nodejs+express實(shí)現(xiàn)文件上傳下載管理網(wǎng)站
- nodejs基于express實(shí)現(xiàn)文件上傳的方法
- 詳解nodejs實(shí)現(xiàn)本地上傳圖片并預(yù)覽功能（express4.0+）
- Nodejs+express+html5 實(shí)現(xiàn)拖拽上傳
- 基于nodejs+express(4.x+)實(shí)現(xiàn)文件上傳功能
- 使用express+multer實(shí)現(xiàn)node中的圖片上傳功能
- 使用nodejs+express實(shí)現(xiàn)簡(jiǎn)單的文件上傳功能
- Ajax異步文件上傳與NodeJS express服務(wù)端處理
- Nodejs進(jìn)階：基于express+multer的文件上傳實(shí)例
- node+express+axios實(shí)現(xiàn)單文件上傳功能
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Node的stream數(shù)據(jù)流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了node中使用socket.io制作命名空間,需要的朋友可以參考下2014-12-12
如何利用node實(shí)現(xiàn)靜態(tài)文件緩存詳解
HTTP 緩存機(jī)制作為 Web 應(yīng)用性能優(yōu)化的重要手段,對(duì)于從事 Web 開(kāi)發(fā)的同學(xué)們來(lái)說(shuō),應(yīng)該是知識(shí)體系的基礎(chǔ)環(huán)節(jié),也是想要成為前端架構(gòu)的必備技能,這篇文章主要給大家介紹了關(guān)于如何利用node實(shí)現(xiàn)靜態(tài)文件緩存的相關(guān)資料,需要的朋友可以參考下2021-07-07
NodeJS實(shí)現(xiàn)客戶(hù)端js加密
本文主要介紹了NodeJS實(shí)現(xiàn)客戶(hù)端js加密的思路與方法，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
node省市區(qū)三級(jí)數(shù)據(jù)性能測(cè)評(píng)實(shí)例分析
這篇文章主要介紹了node省市區(qū)三級(jí)數(shù)據(jù)性能,結(jié)合具體實(shí)例形式評(píng)測(cè)分析了node省市區(qū)三級(jí)數(shù)據(jù)的實(shí)現(xiàn)、改進(jìn)方法與運(yùn)行效率,需要的朋友可以參考下2019-11-11
本篇文章主要介紹了Node.js：stream，Stream在node.js中是一個(gè)抽象的接口，具有一定的參考價(jià)值，有需要的可以了解一下。2016-12-12
詳解從Node.js的child_process模塊來(lái)學(xué)習(xí)父子進(jìn)程之間的通信
這篇文章主要介紹了從Node.js的child_process模塊來(lái)學(xué)習(xí)父子進(jìn)程之間的通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-03-03
利用yarn代替npm管理前端項(xiàng)目模塊依賴(lài)的方法詳解
這篇文章主要給大家介紹了關(guān)于利用yarn代替npm管理前端項(xiàng)目模塊依賴(lài)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-09-09
這篇文章主要為大家介紹了npm?工具庫(kù)?yenv使用簡(jiǎn)介，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
NodeJs 模仿SIP話(huà)機(jī)注冊(cè)的方法
這篇文章主要介紹了NodeJs 模仿SIP話(huà)機(jī)注冊(cè)的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06