zoukankan      html  css  js  c++  java
  • koa2的文件上传

    使用koa2搭建文件上传服务,后端代码

    const os = require('os');
    const path = require('path');
    const koaBody = require('koa-body');
    const Koa = require('koa');
    const app = new Koa();
    
    const fs = require("fs");
    
    const main = async function(ctx) {
      //const tmpdir = os.tmpdir(); //返回系统临时文件
      	
      const tmpdir = path.join(__dirname, "static");	
      
      const filePaths = [];
      const files = ctx.request.files || {};
      const params = ctx.request.body
    	 console.log(params);
       for (let key in files) {
       	const file = files[key];
       	if(Object.prototype.toString.call(file) == '[object Array]'){
       		for(var j = 0; j < file.length; j++ ){
       			witeFile(file[j]);
       		}
       	}else{
       		witeFile(file);
       		
       }
      }
      function witeFile(file){
      	const filePath = path.join(tmpdir, file.name);
        const reader = fs.createReadStream(file.path);
        const writer = fs.createWriteStream(filePath);
        reader.pipe(writer);
        filePaths.push(filePath);
      }
    
      
    
      ctx.body = filePaths;
    };
    
    app.use(koaBody({ multipart: true }));
    app.use(main);
    app.listen(3000);
    

      前端代码

    		<form action="http://localhost:3000/" method="post" enctype="multipart/form-data">
    			<input type="text"	 name="name" id="" value="姓名" />
    			<input type="text"	 name="pwd" id="" value="123456" />
    			<input type="file" name="file" id="file" value="" multiple="multiple" />
    			<input type="submit" value="提交"/>
    		</form>  

    使用ajax 上传

    $("#file")[0].onchange = function(e){
    			console.log(this.files);
    			var filse = this.files;
    			var fd = new FormData();
    			fd.append("file",filse[0]);
    			$.ajax({
    				type:"post",
    				data:fd,
    				processData:false,
    				contentType:false,
    				url:"http://192.168.20.104:3000",
    			}).then(function(ret){
    				console.log(ret);
    			}).catch((e)=>{
    				console.log(e);
    			})
    		}
    

      

    注意:

    新版本的koa-body通过ctx.request.files获取上传的文件 
    旧版本的koa-body通过ctx.request.body.files获取上传的文件 

    另外,附上express 的文件上传:

    const multiparty = require('multiparty');
    
    router.post('/file', function(req, res, next) {
        //生成multiparty对象,并配置上传目标路径
        const form = new multiparty.Form()
        // //设置编辑
        form.encoding = 'utf-8'
        // //设置文件存储路径
        form.uploadDir = "./public/static/"
        // //设置单文件大小限制
        //form.maxFilesSize = 2 * 1024 * 1024
        // form.maxFields = 1000;  设置所以文件的大小总和
        // 上传完成后处理
    
    
        form.parse(req, (err, fields, files) => {
            if (err) {
                console.log("parse:",err);
                res.json(configVar.fileUp);
            } else {
                const inputFile = files.file[0];
                const uploadedPath = inputFile.path
                var  imgtype = inputFile.originalFilename;
                const typarr = imgtype.split(".");
                const typ = typarr[typarr.length -1];
                const nm =  new  Date().getTime()  +  '' +  Math.floor(Math.random()*1000000) ;
                console.log(fields.old);
                imgtype = nm + '.' + typ;
                const inPath = `./public/static/${imgtype}`; //重命名的路径
                // 判断是否存在./dist/static/files文件
                fs.stat('./public/static', (err, stats) => {
                    if (JSON.stringify(stats) === undefined) {
                        fs.mkdirSync('./public/static')
                    }
                    storeFiles(uploadedPath, fields, inPath)
                });
            }
        });
    
        function storeFiles(uploadedPath, fields, inPath) {
            //重命名为真实文件名
            fs.rename(uploadedPath, inPath,  (err) => {
                if (err) {
                    console.log("rename:",err);
                    res.json(configVar.rename);
                } else {
                    var ret  = {
                        data:inPath.substring(8)
                    };
                    Object.assign(ret , configVar.success);
                    res.json(ret);
                }
            });
        }
    
    });
    

      

  • 相关阅读:
    头文件板子
    终极快速读入挂极其使用方法
    upc组队赛18 THE WORLD【时间模拟】
    upc 组队赛18 STRENGTH【贪心模拟】
    upc组队赛17 Stone Game【极小值】
    upc组队赛17 Greatest Common Divisor【gcd+最小质因数】
    upc组队赛17 Bits Reverse【暴力枚举】
    upc组队赛16 Winner Winner【位运算】
    20181217RPC
    20181217 分布式与集群
  • 原文地址:https://www.cnblogs.com/muamaker/p/8917210.html
Copyright © 2011-2022 走看看