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

目前成都創(chuàng)新互聯(lián)公司已為數(shù)千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)絡(luò)空間、綿陽服務(wù)器托管、企業(yè)網(wǎng)站設(shè)計、資興網(wǎng)站維護等服務(wù)，公司將堅持客戶導向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

文件上傳

HTML結(jié)構(gòu)如下，一個file input和一個button。當點擊“上傳”按鈕的時候，將file input選中的文件上傳到 上傳

以下是“上傳”按鈕的點擊事件處理器，點擊按鈕之后通過一個XMLHttpRequest對象來實現(xiàn)發(fā)送異步請求。上傳的內(nèi)容為文件，因此還需要用到FormData對象，F(xiàn)ormData可以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();

// 點擊上傳
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事件，在相應(yīng)的事件處理器里面通過事件對象可以知道當前的上傳進度，利用這個特點可以很方便地實現(xiàn)進度條或者進度提示。

上傳
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 + '%';
 }
}

圖片預(yù)覽

上傳圖片的時候可以利用FileReader對象來實現(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搭建一個簡單的NodeJS服務(wù)端，提供上傳文件的接口。express要支持文件上傳需要用到中間件，在express官網(wǎng)上有很多介紹。這里我使用的是multer中間件，下面是簡單的使用示例。upload.single表示這個接口接受的上傳文件數(shù)量為1個，'test-upload'限制了上傳的表單數(shù)據(jù)的鍵為'test-upload'（formData.append(‘test-upload', file.files[0]);）。經(jīng)過這個中間件處理之后，通過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);
});

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

 // 點擊上傳
 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 + '%';
 }
 }

 // 圖片預(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)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！