Ajax異步文件上傳與NodeJS express服務(wù)端處理的示例分析

發(fā)布時(shí)間：2021-07-24 11:17:21

來源：億速云

閱讀：79

作者：小新

這篇文章主要介紹Ajax異步文件上傳與NodeJS express服務(wù)端處理的示例分析，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

文件上傳

HTML結(jié)構(gòu)如下，一個(gè)file input和一個(gè)button。當(dāng)點(diǎn)擊“上傳”按鈕的時(shí)候，將file input選中的文件上傳到服務(wù)器。

上傳

以下是“上傳”按鈕的點(diǎn)擊事件處理器，點(diǎn)擊按鈕之后通過一個(gè)XMLHttpRequest對象來實(shí)現(xiàn)發(fā)送異步請求。上傳的內(nèi)容為文件，因此還需要用到FormData對象，FormData可以js里面創(chuàng)建表單對象，將file input的文件append到FormData對象中，最后調(diào)用XHR對象的send()方法將表單數(shù)據(jù)發(fā)送出去即可。var?file?=?document.querySelector('#file');

var?upload?=?document.querySelector('#upload');

var?xhr?=?new?XMLHttpRequest();

//?點(diǎn)擊上傳

function?uploadFile(event)?{

var?formData?=?new?FormData();

formData.append('test-upload',?file.files[0]);

xhr.onload?=?uploadSuccess;

xhr.open('post',?'/upload',?true);

xhr.send(formData);

}

//?成功上傳

function?uploadSuccess(event)?{

if?(xhr.readyState?===?4)?{

console.log(xhr.responseText);

}

}

上傳進(jìn)度

在進(jìn)行文件上傳的時(shí)候，xhr對象會有一個(gè)upload屬性，會提供一個(gè)progress事件，在相應(yīng)的事件處理器里面通過事件對象可以知道當(dāng)前的上傳進(jìn)度，利用這個(gè)特點(diǎn)可以很方便地實(shí)現(xiàn)進(jìn)度條或者進(jìn)度提示。

上傳

0%var?progress?=?document.querySelector('#progress');

//?點(diǎn)擊上傳

function?uploadFile(event)?{

var?formData?=?new?FormData();

formData.append('test-upload',?file.files[0]);

xhr.onload?=?uploadSuccess;

xhr.upload.onprogress?=?setProgress;

xhr.open('post',?'/upload',?true);

xhr.send(formData);

}

//?進(jìn)度條

function?setProgress(event)?{

if?(event.lengthComputable)?{

var?complete?=?Number.parseInt(event.loaded?/?event.total?*?100);

progress.innerHTML?=?complete?+?'%';

}

}

圖片預(yù)覽

上傳圖片的時(shí)候可以利用FileReader對象來實(shí)現(xiàn)圖片預(yù)覽。FileReader可以異步讀取用戶電腦上的文件，將file input選中的文件傳給FileReader，讀取之后取得文件的URL并設(shè)置為image元素的src即可讓選中的圖片文件顯示出來。

上傳

0

var?file?=?document.querySelector('#file');

file.addEventListener('change',?previewImage,?false);

//?圖片預(yù)覽

function?previewImage(event)?{

var?reader?=?new?FileReader();

reader.onload?=?function?(event)?{

image.src?=?event.target.result;

};

reader.readAsDataURL(event.target.files[0]);

}

服務(wù)端處理

使用express搭建一個(gè)簡單的NodeJS服務(wù)端，提供上傳文件的接口。express要支持文件上傳需要用到中間件，在express官網(wǎng)上有很多介紹。這里我使用的是multer中間件，下面是簡單的使用示例。upload.single表示這個(gè)接口接受的上傳文件數(shù)量為1個(gè)，'test-upload'限制了上傳的表單數(shù)據(jù)的鍵為'test-upload'(formData.append(‘test-upload', file.files[0]);)。經(jīng)過這個(gè)中間件處理之后，通過req.file可以訪問到文件的相關(guān)信息，上傳的文件存放在uploads文件夾中。const?upload?=?require('multer')({?dest:?'uploads/'?});

app.post('/upload',?upload.single('test-upload'),?(req,?res)?=>?{

//?沒有附帶文件

if?(!req.file)?{

res.json({?ok:?false?});

return;

}

//?輸出文件信息

console.log('====================================================');

console.log('fieldname:?'?+?req.file.fieldname);

console.log('originalname:?'?+?req.file.originalname);

console.log('encoding:?'?+?req.file.encoding);

console.log('mimetype:?'?+?req.file.mimetype);

console.log('size:?'?+?(req.file.size?/?1024).toFixed(2)?+?'KB');

console.log('destination:?'?+?req.file.destination);

console.log('filename:?'?+?req.file.filename);

console.log('path:?'?+?req.file.path);

});

由輸出可以看到，文件的命名使用一個(gè)哈希值表示，并且去除了后綴名，想要保持文件的原有的命名格式，需要再通過fs對文件進(jìn)行改名。app.post('/upload',?upload.single('test-upload'),?(req,?res)?=>?{

//?沒有附帶文件

if?(!req.file)?{

res.json({?ok:?false?});

return;

}

//?輸出文件信息

console.log('====================================================');

console.log('fieldname:?'?+?req.file.fieldname);

console.log('originalname:?'?+?req.file.originalname);

console.log('encoding:?'?+?req.file.encoding);

console.log('mimetype:?'?+?req.file.mimetype);

console.log('size:?'?+?(req.file.size?/?1024).toFixed(2)?+?'KB');

console.log('destination:?'?+?req.file.destination);

console.log('filename:?'?+?req.file.filename);

console.log('path:?'?+?req.file.path);

//?重命名文件

let?oldPath?=?path.join(__dirname,?req.file.path);

let?newPath?=?path.join(__dirname,?'uploads/'?+?req.file.originalname);

fs.rename(oldPath,?newPath,?(err)?=>?{

if?(err)?{

res.json({?ok:?false?});

console.log(err);

}?else?{

res.json({?ok:?true?});

}

});

});

完整代碼

ajax異步文件上傳、進(jìn)度顯示、圖片預(yù)覽

上傳

0

(function?()?{

'use?strict';

var?file?=?document.querySelector('#file');

var?upload?=?document.querySelector('#upload');

var?progress?=?document.querySelector('#progress');

var?image?=?document.querySelector('#image');

var?xhr?=?new?XMLHttpRequest();

upload.addEventListener('click',?uploadFile,?false);

file.addEventListener('change',?previewImage,?false);

//?點(diǎn)擊上傳

function?uploadFile(event)?{

var?formData?=?new?FormData();

formData.append('test-upload',?file.files[0]);

xhr.onload?=?uploadSuccess;

xhr.upload.onprogress?=?setProgress;

xhr.open('post',?'/upload',?true);

xhr.send(formData);

}

//?成功上傳

function?uploadSuccess(event)?{

if?(xhr.readyState?===?4)?{

console.log(xhr.responseText);

}

}

//?進(jìn)度條

function?setProgress(event)?{

if?(event.lengthComputable)?{

var?complete?=?Number.parseInt(event.loaded?/?event.total?*?100);

progress.innerHTML?=?complete?+?'%';

}

}

//?圖片預(yù)覽

function?previewImage(event)?{

var?reader?=?new?FileReader();

reader.onload?=?function?(event)?{

image.src?=?event.target.result;

};

reader.readAsDataURL(event.target.files[0]);

}

})();

express服務(wù)器提供文件上傳接口const?express?=?require('express');

const?upload?=?require('multer')({?dest:?'uploads/'?});

const?path?=?require('path');

const?fs?=?require('fs');

const?port?=?8080;

let?app?=?express();

app.set('port',?port);

//?index.html,?index.js放在static文件夾中

app.use(express.static(path.join(__dirname,?'static')));

app.get('*',?(req,?res)?=>?{

res.redirect('index.html');

});

app.post('/upload',?upload.single('test-upload'),?(req,?res)?=>?{

//?沒有附帶文件

if?(!req.file)?{

res.json({?ok:?false?});

return;

}

//?輸出文件信息

console.log('====================================================');

console.log('fieldname:?'?+?req.file.fieldname);

console.log('originalname:?'?+?req.file.originalname);

console.log('encoding:?'?+?req.file.encoding);

console.log('mimetype:?'?+?req.file.mimetype);

console.log('size:?'?+?(req.file.size?/?1024).toFixed(2)?+?'KB');

console.log('destination:?'?+?req.file.destination);

console.log('filename:?'?+?req.file.filename);

console.log('path:?'?+?req.file.path);

//?重命名文件

let?oldPath?=?path.join(__dirname,?req.file.path);

let?newPath?=?path.join(__dirname,?'uploads/'?+?req.file.originalname);

fs.rename(oldPath,?newPath,?(err)?=>?{

if?(err)?{

res.json({?ok:?false?});

console.log(err);

}?else?{

res.json({?ok:?true?});

}

});

});

app.listen(port,?()?=>?{

console.log("[Server]?localhost:"?+?port);

});

以上是“Ajax異步文件上傳與NodeJS express服務(wù)端處理的示例分析”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

總結(jié)

以上是生活随笔為你收集整理的nodejs ajax进度条,Ajax异步文件上传与NodeJS express服务端处理的示例分析的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。