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

發布時間：2021-07-24 11:17:21

來源：億速云

閱讀：79

作者：小新

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

文件上傳

HTML結構如下，一個file input和一個button。當點擊“上傳”按鈕的時候，將file input選中的文件上傳到服務器。

上傳

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

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

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

//?點擊上傳

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);

}

}

上傳進度

在進行文件上傳的時候，xhr對象會有一個upload屬性，會提供一個progress事件，在相應的事件處理器里面通過事件對象可以知道當前的上傳進度，利用這個特點可以很方便地實現進度條或者進度提示。

上傳

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

//?點擊上傳

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?setProgress(event)?{

if?(event.lengthComputable)?{

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

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

}

}

圖片預覽

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

上傳

0

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

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

//?圖片預覽

function?previewImage(event)?{

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

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

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

};

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

}

服務端處理

使用express搭建一個簡單的NodeJS服務端，提供上傳文件的接口。express要支持文件上傳需要用到中間件，在express官網上有很多介紹。這里我使用的是multer中間件，下面是簡單的使用示例。upload.single表示這個接口接受的上傳文件數量為1個，'test-upload'限制了上傳的表單數據的鍵為'test-upload'(formData.append(‘test-upload', file.files[0]);)。經過這個中間件處理之后，通過req.file可以訪問到文件的相關信息，上傳的文件存放在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);

});

由輸出可以看到，文件的命名使用一個哈希值表示，并且去除了后綴名，想要保持文件的原有的命名格式，需要再通過fs對文件進行改名。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異步文件上傳、進度顯示、圖片預覽

上傳

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);

//?點擊上傳

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);

}

}

//?進度條

function?setProgress(event)?{

if?(event.lengthComputable)?{

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

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

}

}

//?圖片預覽

function?previewImage(event)?{

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

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

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

};

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

}

})();

express服務器提供文件上傳接口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服務端處理的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。