Vue+Koa2实现文件的上传和下载

• 客户端的准备：采用Vue+iview的Upload组件实现。

可以发现，上面的代码我只是从官网上随便拷贝了一下做了简单的修改，但已经可以将文件上传到iview提供的服务器上，也就是说现在只需要修改一下action的值为Koa2提供的API即可，至于一些后续的扩展待API实现了后再慢慢的讲解。

• 服务器端的处理：采用Koa2实现

输入npm init，初始化项目
输入npm install koa2 --save下载koa2的依赖包
输入npm install koa-router -save下载koa2路由依赖包

const Koa=require('koa2');
const app=new Koa;
const Router=require('koa-router');
var router=new Router;
const fs=require('fs');

function parsePostData(ctx){
    return new Promise((resolve,reject)=>{
        try{
            let postdata;
            ctx.req.on('data',(data)=>{
                postdata=data;
            })
            ctx.req.addListener('end',()=>{
                let filename=Date.now().toString()+'.文件的后缀名';
                fs.writeFile('./upload/'+filename,postdata,function(err){
                    if(err){
                        reject(err);
                    }
                    resolve(filename);
                });
            });
        }catch(err){
            reject(err);
        }
    })
}

router.post('/upload',async ctx=>{
    var fileName=await parsePostData(ctx);
    ctx.body={
        code:200,
        fileName:fileName
    }
});
app.use(router.routes()).use(router.allowedMethods());
app.listen(3000,()=>{
    console.log("服务器已开启！");
});

从代码中可以看出,上面的代码遇到了一个问题，就是如何获取文件的后缀名，另外还有一个隐藏的问题，假设认为后缀名就是.txt，在上传完文件后，打开服务器上保存的文件，会发现存在一些原来文本内容当中不存在的内容，这是因为根据RFC 1867协议导致的，不过目前本人无法解决，所以在这里我就放弃了该思路，如果有了解的小伙伴欢迎私信与我探讨。
自己写不出来但是可以发现有现成的koa-multer依赖包可以用，故而

输入npm install koa-multer --save下载koa-multer
输入npm install koa2-cors --save解决跨域的问题
输入npm install koa-static --save实现静态资源访问

const Koa=require('koa2');
const app=new Koa;

const fs=require('fs');

const path = require('path')
const static = require('koa-static')


const staticPath = './upload'

app.use(static(
    path.join( __dirname,  staticPath)
))
//解决跨域
const cors=require('koa2-cors');
app.use(cors());

const Router=require('koa-router');
var router=new Router;

//引用multer实现文件上传与下载
const multer=require('koa-multer');

//配置单文件上传的路径
var storage = multer.diskStorage({
    //定义文件保存路径
    destination:function(req,file,cb){
        cb(null,'./upload/');//路径根据具体而定。如果不存在的话会自动创建一个路径
    },                       //注意这里有个，
    //修改文件名
    filename:function(req,file,cb){
        var fileFormat = (file.originalname).split(".");
            cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
    }
})
var upload = multer({ storage: storage });

router.post('/upload',upload.single('file'),async (ctx,next)=>{
    ctx.body={
        filename:ctx.req.file.filename
    }
});



app.use(router.routes()).use(router.allowedMethods());

app.listen(3000,()=>{
    console.log("服务器已开启！");
});

利用multer就很快速的实现了文件的上传功能，再回过头来完善客户端的功能。

• 客户端的完善
  将action的值修改为http://localhost:3000/upload，打开页面，任意上传几个文件，可以发现一点问题都没有。
  
  客户端上传效果

增加文件上传个数的限制

根据文档，可以发现存在一个before-upload的钩子函数，即文件上传之前的钩子函数，所以该需求的实现方法如下。

      handleBeforeUpload(){
        const check = this.$refs.upload.fileList.length < 2;
        if (!check) {
            this.$Notice.warning({
                title: '最多只能上传两个文件！'
            });
        }
        return check;
      },

阻止文件上传，当点击某一个按钮的时候再批量上传

阻止文件上传根据官方文档可以知道只需在before-upload钩子函数内返回false即可，故而利用

this.$refs.upload.upload(file);

是实现不了上传的，那么只能自己发请求去处理了。

最后至于如何在样式上设计可以参考官网最后一个案例。