最近在做项目的时候需要这样一个模块，让用户上传excel文件导入姓名和电话号码，可以在线预览。

之后就开始琢磨要怎么实现。

首先这样的流程：前端----后台----存储----读取----传回前端json格式。

然后我把这个流程简化成几个难点：

1.前端怎么操作文件？

2.前端怎么发至后台？

3.后台如何接收文件？

4.后台怎么读取excel文件？

正文：

1.前端怎么操作文件？

h5有自己的文件操作系统，File API，网上有很多资源，以下是一段最简洁的代码：


[html] 

  

1. <form id="uploadForm" enctype="multipart/form-data">  
2. <p>上传文件：<input type="file" name="file" id="ff" /></p>  
3. <input type="button" value="上传" onclick="doUpload()" />  
4. </form>


最为关键是的把form的entype设置为multipart/form-data，该类型就是为传文件而服务的。

2.前端怎么发至后台存储？

前端发送文件最简单的就是jquery封装的ajax方法，以下为doUpload()函数的具体代码：


[javascript]

  

    1. function doUpload() {  
2. var formData = new FormData($("#uploadForm")[0]);  
3. if($('#ff').val() !== ''){  
4.         $.ajax({  
5. '',//此处放你自己的后台API  
6. 'POST',  
7.             data: formData,  
8. false,  
9. false,  
10. false,  
11. false,  
12. function(returndata) {  
13.                 alert(returndata);  
14.             },  
15. function(returndata) {  
16.                 alert(returndata);  
17.             }  
18.         });  
19. else{  
20. '请选择文件。')  
21.     }  
22. }


    右键打开‘检查’然后点开Network这一栏，然后选取文件点击上传之后会多出一栏formdata 点开它，在Headers里你会看到以下这些内容



    说明已经传送到了后台API。

    3.后台如何接收文件？

    查阅很多资料之后找到一个叫做connect-busboy的模块可以进行文件传输。

    安装模块


    [javascript] 


    1. npm install connect-busboy  


    使用模块

    nodejs启动页


    [javascript]


    1. var busboy = require('connect-busboy');  


    中间件配置


    [javascript]  

    1. app.use(busboy({  
2.     limits: {  
3. // 10MB  
4.     }  
5. }));


    需要引入的模块


    [javascript]  

    1. var Busboy = require('connect-busboy');  
2. var path = require('path');  
3. var fs = require('fs');



    然后就可以使用了


    [javascript] 

      1. router.post('/formdata', function(req, res, next) {  
2. "Access-Control-Allow-Origin", "*");//允许跨域请求  
3.   
4. 'file', function(fieldname, file, filename, encoding, mimetype) {  
5. var tmp_path = path.join(__dirname, path.basename(filename));//存储路径  
6. var ws = fs.createWriteStream(tmp_path);  
7.         file.pipe(ws);  
8.         console.log(tmp_path);  
9. 'end', function() {  
10. 'file end');  
11.         });  
12. 'finish',function(){  
13. '写入完成');  
14. //test(req,res,next,tmp_path);这段是之后用来处理excel文件的函数  
15.         });  
16.     });  
17.     req.pipe(req.busboy);  
18. });


      这样你就可以将前端传输的文件存储在了后台。



      4.后台怎么读取excel文件？

      这个时候又需要一个叫做xlsx的模块。

      安装

      npm install xlsx

      使用

      var xlsx = require('xlsx');

      以下是读取文件并传回json的函数


      [javascript] 

        


      1. function test(req, res, next, mypath) {  
2. var workbook = xlsx.readFileSync(mypath);//读取刚存完的excel文件  
3.   
4. var firstSheetName = workbook.SheetNames[0];  
5. var sheet = workbook.Sheets[firstSheetName];  
6. var cell = '1';  
7. var r = 0,  
8.         c = 0,  
9. new Array,  
10. new Object;  
11. try {  
12. while (cell !== undefined) {  
13. var row = xlsx.utils.encode_row(r);//行  
14. var col = xlsx.utils.encode_col(c);//第一列  
15. var col1 = xlsx.utils.encode_col(c + 1);//第二列  
16. var addr = col + row;  
17. var addr1 = col1 + row;  
18. var cell = sheet[addr];//读取此行第一列的数据，姓名  
19. var cell1 = sheet[addr1];//读取此行第二列的数据，电话号码  
20. //一次读取下一行  
21. 将数据存到数组里  
22. exceltext.push({name:cell.w,phone:cell1.w});
23.         }  
24. catch (err) {  
25. //传回json数据  
26.     }  
27. }


      这样整套流程就做完了。


      使用gulp实现文件更改自动刷新

      我相信肯定有很多前端开发者和我一样都厌倦了修改完代码再切换到浏览器刷新去看新的实现。今天我们就用一种最简单的文件监听模式和一个gulp插件（gulp-livereload）来实现这个功能。

      1. 首先安装gulp
      npm install gulp -g
      1. 安装gulp-livereload插件
      npm i gulp-livereload --save-dev

      (npm i 为npm install 缩写） 
      3. 配置gulp配置文件 
      自动刷新配置

      //监听所有打包之后的文件变动，自动刷新页面
gulp.task('watch', function () {
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);
});

      要使这个能够工作，还需要在浏览器上安装LiveReload插件，或者在你需要自动刷新的页面上加上 
      1.本地

      <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>

      2.远程

      <script src="http://192.168.0.1:35729/livereload.js?snipver=1"></script>

      整个gulp

      var gulp = require('gulp');
var less = require('gulp-less');
var minifyCSS = require('gulp-minify-css');
var babel = require('gulp-babel');
var livereload = require('gulp-livereload');
//编译less
gulp.task('less', function () {
  return gulp.src('./src/less/**.less')
    .pipe(less())
    //.pipe(minifyCSS())
    .pipe(gulp.dest('dist/css'));
});
//监听less文件
gulp.task('autoless', function () {
  gulp.watch('./src/less/**.less', ['less'])
})
//编译es6
gulp.task('babel', () => {
  return gulp.src(['./src/js/**.js'])
    .pipe(babel({ presets: ['es2015'] }))
    .pipe(gulp.dest('dist/js'));
});
//监听js文件
gulp.task('autojs', function () {
  gulp.watch('./src/js/**.js', ['babel'])
});
//监听所有打包之后的文件变动，自动刷新页面
gulp.task('watch', function () {
  // Create LiveReload server
  livereload.listen();
  // Watch any files in dist/, reload on change
  gulp.watch(['dist/**']).on('change', livereload.changed);
});
// 使用 gulp.task('default') 定义默认任务
gulp.task('default', ['less', 'autoless', 'babel', 'autojs',