基於node.js伺服器-完整的-前後端的Excel匯入,ajax檔案的上傳
我們都知道admin管理員,在很多時候需要直接從外面匯入excel表格的資料內容,昨天剛剛解決了這個問題,在次給大家分享一下,我們先從前臺開始吧。
前臺要解決的問題時,如何上傳檔案,如何獲取檔案字尾名,基本就這些內容。
上傳我知道的有兩種,一種是通過表單提交的形式,一種是使用ajax的方式。兩種我都寫了,第一種,存在一個比較棘手的form表單提交會跳轉頁面的問題,也有解決的辦法,不過比較麻煩。所以推薦使用ajax的方式。
前端
1,html頁面內容
<div class="lend_into_c hide"> <h2 style="padding-top: 20px;">選擇檔案</h2> <div class="col-sm-10"> <p class="form-control-static"> <input type="file" id="inputfile" name="fileTrans"/> </p> </div> <div class="cz_lend"> <button class="lend_save btn btn-default">儲存</button> <button class="lend_q btn btn-default">取消</button> </div> </div>
2,js內容
//使用ajax上傳檔案
$(".cz_lend").click(function(){ var files = $('input[name="fileTrans"]').prop('files');//獲取到檔案列表 //console.log(files); if(files.length==0){//攔截空檔案 alert("請選擇檔案"); }else{ var files_name=files[0].name;//獲取檔名稱 var zh=(/[^\.]+$/); var files_name=files_name.match(zh);//中正則獲取字尾名稱 //console.log(files_name[0]); if(files_name[0]!=='xls'){//攔截不是excel表格的檔案 alert("請選擇excel表格"); }else{ var formData = new FormData();//提交檔案 //為FormData物件新增資料 $.each(files, function(i, files) {//一定要見資料加入進去 formData.append('upload_file', files); }); //console.log(formData);//可以先打印出來看看,有資料了在讓傳送ajax請求 $.ajax({ type:"post", url:"/admin/lend_in", data:formData, dataType: 'JSON', contentType:false,//必須false才能自動加上正確的 content-type processData:false,// 必須false才會避開jQuery對 formdata 的預設處理 XMLHttpRequest會對 formdata 進行正確的處理 success: function(data){ // console.log(data); alert("上傳成功!"); } }); } } });
前端差不多就這樣了,如果有問題大家可以問我,form表單提交的我就,不寫了,中在對excel表格的處理
後端
首先要做的是下載外掛 node-xlsx
可以在命令視窗下載 npm install node-xlsx
也可以去這裡下載,我傳上去的,地址https://download.csdn.net/download/www_share8/10343171
首先來看一下我的整個伺服器的目錄結構
首先你的伺服器上得引入檔案外掛
const multer=require('multer');//上傳檔案
const multerObj=multer({dest:'./static/upload'});
server.use(multerObj.any());//上傳任何檔案
這樣上傳的檔案就可以到指定的位置了。
我自己個人的伺服器是這樣寫的,先開一個控制器
//設定學生管理的控制器
var student_manage=require('./route/admin/stu_manage.js');//引入學生管理的 控制器
然後在開一個路由
server.post('/admin/lend_in',student_manage.lend_in);//從外部匯入excel表格資料
然後就是具體的服務程式了
//匯入開模組
exports.lend_in=function(req,res){
var orr=1;
var newFileName=req.files[0].filename;//獲取轉碼後的檔名稱
//read from a file
var filename='./static/upload/'+newFileName; //獲取檔案所在的位置
var obj = xlsx.parse(filename);//這裡就是引入的外掛
var file_data=obj[0].data;//拿到自己想要的資料
//console.log(file_data);
for(var i=1;i<file_data.length;i++){//剩下的就是將資料傳入資料庫中
//console.log(file_data[i][2]);
db.query(`INSERT INTO student_table(s_num) VALUE('${file_data[i][0]}')`,(err,data)=>{
if(err){
console.log(err);
res.status(500).send("database error").end();
orr==0;
}
});
}
if(orr){
res.json({"result":{message:"檔案上傳成功!"}});//給前臺一個反饋
}else{
res.json({"result":{message:"檔案上傳失敗!"}});
}
}
最後總結一下,首先不足,上傳檔案那裡,僅僅限制了上傳的型別為.xls,但裡面的內容並沒有做相應的改進。解決方法有兩個,第一個,你個使用者一個使用的模板,具體讓他知道,資料庫裡都需要那些內容。這個比較推薦。
第二個,就是每次使用者上傳完後,從使用者上傳的內容中提取資料庫想要的資料,(前提,上傳是內容大於資料庫想要提取的內容資訊)。如果上傳內容資訊少於,伺服器做出相應的提示(不太推薦)
初步解決,文章一上來所提的兩個問題,匯入excel表格,和檔案上傳的問題。
匯入和匯出有相通的地方,下面是別所寫的匯出的部分程式碼
/* GET export excel test. */
router.get('/exportExcel', function(req, res, next) {
// write
var data = [[1,2,3],[true, false, null, 'sheetjs'],['foo','bar',new Date('2014-02-19T14:30Z'), '0.3'], ['baz', null, 'qux']];
var buffer = xlsx.build([{name: "mySheetName", data: data}]);
fs.writeFileSync('b.xlsx', buffer, 'binary');
res.send('export successfully!');
最後,這個程式碼我已經驗證過了,可以實現功能。如果大家有什麼不懂的可以留言問我,我一定會回答大家的。希望有什麼寫的不對的地方,大家能留言告訴我,我一定會改進的。謝謝。