Ajax異步文件上傳與NodeJS express服務(wù)端處理

更新時間：2017年04月01日 11:04:58 作者：去門口罰站

本文主要介紹了Ajax異步文件上傳與NodeJS express服務(wù)端處理的相關(guān)知識。具有很好的參考價值。下面跟著小編一起來看下吧

為了避免在實現(xiàn)簡單的異步文件上傳功能時候引入一個第三方庫文件的尷尬情形（庫文件可能造成多余的開銷，拉低應(yīng)用加載速度，尤其是在引入庫文件之后僅使用其中一兩個功能的情況下，性價比極低），最近了解了一下文件異步上傳的實現(xiàn)原理，順帶看了看進(jìn)度條、圖片預(yù)覽等功能的實現(xiàn)，做一點簡單的整理。

文件上傳

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

<input type="file" name="file" id="file" />
<button id="upload">上傳</button>

以下是“上傳”按鈕的點擊事件處理器，點擊按鈕之后通過一個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);
 }
}

上傳進(jìn)度

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

<input type="file" name="file" id="file" />
<button id="upload">上傳</button>
<span id="progress">0%</span>

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);
}
// 進(jìn)度條
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即可讓選中的圖片文件顯示出來。

<input type="file" name="file" id="file" />
<button id="upload">上傳</button>
<span id="progress">0</span>
<img id="image" src="" width="200" />

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對文件進(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ù)覽

<input type="file" name="file" id="file" />
<button id="upload">上傳</button>
<span id="progress">0</span>
<img id="image" src="" width="200" />

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

 // 進(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);
});

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章: