1. 程式人生 > >基於node.js伺服器-完整的-前後端的Excel匯入,ajax檔案的上傳

基於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!');  
最後,這個程式碼我已經驗證過了,可以實現功能。如果大家有什麼不懂的可以留言問我,我一定會回答大家的。希望有什麼寫的不對的地方,大家能留言告訴我,我一定會改進的。謝謝。