Express特别火，搭建网站超容易，Http请求反应飞快。功能强到不行，像路由控制啊、模板解析呀、动态视图什么的，建网站就跟搭积木一样好玩！
Express上传真的超简单！只需要上传一下文件到服务器，就会自动保存到临时文件夹，真是轻松又便捷！
文件上传的幕后英雄
聊到Express怎么搞定上传的，它可就像是个隐形英雄帮咱忙了！这个英雄，就是咱们熟知的Express框架，不仅能接住文件，还能把它们稳妥安置在临时文件夹里等我们去搞定。
搞定它很容易，只需要把文件从缓存里挪去设定好的地儿就能完成。真的是省时又有效！有了这种办法，上传文件的困扰就可以统统消失喽~
function uploader(url, data, files) {
this._files = files;
this._data = data;
this._url = url;
this._xhr = null;
this.onloadstart = {};
this.onload = {};
this.onloadend = {};
this.onprogress = {};
this.onerror = {};
this.ontimeout = {};
this.callback = {};//请求完成后回调
_self = this;
}
uploader.prototype = {
init: function () {
if (!isValid()) {
throw e;
}
this._xhr = new XMLHttpRequest();
this._bindEvents();
},
send: function () {
if (this._xhr == null) {
this.init();
}
var formData = this._createFormData();
this._xhr.open('post', this._url, true);
this._xhr.send(formData);
},
_bindEvents: function () {
_self = this;
this._xhr.upload.loadstart = function (e) {
evalFunction(_self.onloadstart, e);
}
this._xhr.upload.onload = function (e) {
evalFunction(_self.onload, e);
};
this._xhr.upload.onloadend = function (e) {
evalFunction(_self.onloadend, e);
}
this._xhr.upload.onprogress = function (e) {
evalFunction(_self.onprogress, e)
};
this._xhr.upload.onerror = function (e) {
evalFunction(_self.onerror, e);
};
this._xhr.upload.ontimeout = function (e) {
evalFunction(_self.ontimeout, e);
}
this._xhr.onreadystatechange = function () {
if (_self._xhr.readyState == 4) {
if (typeof _self.callback === 'function') {
var status = _self._xhr.status;
var data = _self._xhr.responseText;
_self.callback(status, data);
}
}
}
},
_createFormData: function () {
var formData = new FormData();
this._addDataToFormData(formData);
this._addFileToFormData(formData);
return formData;
},
_addDataToFormData: function (formData) {
if (this._data) {
for (var item in this._data) {
formData.append(item, this._data[item]);
}
}
},
_addFileToFormData: function (formData) {
if (this._files) {
for (var i = 0; i < this._files.length; i++) {
var file = this._files[i];
formData.append('file[' + i + ']', this._files[i]);
}
}
}
};
View Code
var uploaderFactory = {
send: function (url, data, files, callback) {
var insUploader = new uploader(url, data, files);
insUploader.callback = function (status, resData) {
if (typeof callback === 'function') {
callback(status, resData);
}
}
insUploader.send();
return insUploader;
}
};
HTML5的新魔法
HTML5里边有好多有意思的功能，比如说拖拽啥的，可以让网页设计师把牛逼操作运用到极致，同时也能提高用户的使用感受。
HTML5给咱们的XMLHttpRequest加了几项牛气冲天的新增功能，譬如那个叫FormData的大家伙。有了它，上传文件就跟吃口饭喝口水那么容易！那些让人抓狂的上传问题？它们轻松就能搞定！
uploaderQueue.js的秘密
(function (upladerQueue) {
var Status = {
Ready: 0,
Uploading: 1,
Complete: 2
}
var _self = null;
var instance = null;
function Queue() {
this._datas = [];
this._curSize = 0;//当前长度
_self = this;
}
Queue.prototype = {
add: function (data) {
var key = new Date().getTime();
this._datas.push({key: key, data: data, status: Status.Ready});
this._curSize = this._datas.length;
return key;
},
remove: function (key) {
var index = this._getIndexByKey(key);
this._datas.splice(index, 1);
this._curSize = this._datas.length;
},
get: function (key) {
var index = this._getIndexByKey(key);
return index != -1 ? this._datas[index].data : null;
},
clear: function () {
this._datas = [];
this._curSize = this._datas.length;
},
size: function () {
return this._curSize;
},
setItemStatus: function (key, status) {
var index = this._getIndexByKey(key);
if (index != -1) {
this._datas[index].status = status;
}
},
nextReadyingIndex: function () {
for (var i = 0; i < this._datas.length; i++) {
if (this._datas[i].status == Status.Ready) {
return i;
}
}
return -1;
},
getDataByIndex: function (index) {
if (index < 0) {
return null;
}
return this._datas[index];
},
_getIndexByKey: function (key) {
for (var i = 0; i < this._datas.length; i++) {
if (this._datas[i].key == key) {
return i;
}
}
return -1;
}
};
function getInstace() {
if (instance === null) {
instance = new Queue();
return instance;
} else {
return instance;
}
}
upladerQueue.Queue = getInstace();
upladerQueue.UploadStatus = Status;
})(window.uploaderQueue);
说到这儿，我们得说清楚，UploaderQueue.js最重要的任务就是帮咱们处理上传文件排队这件事儿了。那么怎么加新货，删旧货，又或者是换个位置？通通交给它来搞定就行了，保证上传过程有条不紊！
这家伙厉害！它里头藏着两个好帮手——Queue和UploadEngine。Queue管着我们文件的顺序，UploadEngine就负责从队列里拉出文件然后给传送到网站上。俩人默契十足，文件上传快又稳妥。
uploaderFactory的便捷接口
用了这个工厂真方便！跟用jQuery的Ajax方法一样容易，大家就可以全神贯注在自己的那块代码上咯~
(function (upladerQueue) {
var instance = null;
var _self;
function uploadEngine() {
this._url = null;
this._curUploadingKey = -1;//标志
this.uploadStatusChanged = {};
this.uploadItemProgress={};
_self = this;
}
uploadEngine.prototype = {
setUrl: function (url) {
this._url = url;
},
run: function () {
if (this._curUploadingKey === -1 && this._url) {
this._startUpload();
}
},
_startUpload: function () {
_self = this;
var index = upladerQueue.Queue.nextReadyingIndex();
if (index != -1) {
this._uploadItem(index);
} else {
this._curUploadingKey = -1;
return null;
}
},
_uploadItem: function (index) {
var data = upladerQueue.Queue.getDataByIndex(index).data;
_self = this;
this._readyUploadItem(index);
var upload = uploaderFactory.send(this._url, null, data.files, function (status, data) {
_self._completedUploadItem.call(_self, status, data);
});
this._uploadItemProgress(upload);
},
_uploadItemProgress: function (upload) {
upload.onprogress = function (e) {
_self.uploadItemProgress(_self._curUploadingKey,e);
}
},
_readyUploadItem: function (index) {
this._curUploadingKey = upladerQueue.Queue.getDataByIndex(index).key;
if (typeof this.uploadStatusChanged === 'function') {
this.uploadStatusChanged(this._curUploadingKey, upladerQueue.UploadStatus.Uploading);
}
upladerQueue.Queue.setItemStatus(this._curUploadingKey, upladerQueue.UploadStatus.Uploading);
},
_completedUploadItem: function (status, data) {
if (typeof this.uploadStatusChanged === 'function') {
this.uploadStatusChanged(this._curUploadingKey, upladerQueue.UploadStatus.Complete);
}
upladerQueue.Queue.setItemStatus(this._curUploadingKey, upladerQueue.UploadStatus.Complete);
this._startUpload();
}
};
function getInstace() {
if (instance === null) {
instance = new uploadEngine();
}
return instance;
}
upladerQueue.Engine = getInstace();
})(window.uploaderQueue);
上传文件不怕弄坏了，用上这uploaderFactory就能搞定！现在做网站可火爆得很呢～
文件上传队列的内部机制
咱们管文件就是弄个表格，记录下每份文件的信息。有个名字（如key），里面有些东西（数据data）和状态啥的,只要照这个表去找文件，就能随心所欲地增删改查。
嘿~得告诉你，上传队列里那个叫上传引擎的小玩意儿（uploadEngine.js）很有用，它有两个实用小功能——run和setUrl，帮你快速搞定上传和设置路径，这下我们就能直接掌控整个上传流程啦～
(function (app) {
var _self;
function uploaderMain(id) {
this._id = id;
this._area = null;
this.uploaders = [];
this._URL = 'file/uploader';
}
uploaderMain.prototype = {
init: function () {
_self = this;
this._initArea();
this._initQueueEng();
},
_initQueueEng: function () {
uploaderQueue.Engine.setUrl(this._URL);
uploaderQueue.Engine.uploadStatusChanged = function (key, status) {
if (status === uploaderQueue.UploadStatus.Uploading) {
_self._area.hideItemCancel(key);
} else if (status === uploaderQueue.UploadStatus.Complete) {
_self._area.completeItem(key);
_self._area.showItemCancel(key);
}
}
uploaderQueue.Engine.uploadItemProgress = function (key, e) {
var progress = e.position / e.total;
_self._area.changeItemProgress(key, Math.round(progress * 100));
}
},
_initArea: function () {
this._area = new app.area(this._id);
this._area.init();
this._area.drop = function (e) {
var key = uploaderQueue.Queue.add({files: e.dataTransfer.files});
uploaderQueue.Engine.run();
return key;
}
this._area.cancelItem = function (key) {
uploaderQueue.Queue.remove(key);
}
}
};
app.main = uploaderMain;
})(window.uploaderApp);
Express中的文件上传配置
装上Express后，我们只要设定一个临时文件夹，就可以搞定文件上传！只需在app.js里添加一些代码，上传的东西都能安全地存储哦～
记住这个方法特简单。把临时文件夹里的内容挪到服务器上，接着删掉原有的就行，一切ok！这么做你的文件就能稳稳地待在那儿，而且操作起来还更省心~
var main=new uploaderApp.main('container');
main.init();
总结与展望
看了这篇文章，就知道为什么Express框架的文件上传功能如此厉害！不管是技术层面还是实际操作起来，都是超级棒的，实在太赞了！
各位，突然想到个问题——你们编程时有没碰到过文件上传这破事儿？咋解决这么棘手的问题？这烦恼现象真是太常见了。咱评论区聊聊，记得点个赞鼓励我一下！别忘了分享给更多小伙伴，让他们也感受下Express的强大！
app.use(express.bodyParser({
uploadDir:__dirname+'/public/temp'
}));
原文链接：https://www.icz.com/technicalinformation/web/2024/06/18548.html，转载请注明出处~~~
评论0