koa2实现简单的图片上传
程序员文章站
2022-04-09 17:33:32
1、安装koa-body 2、引入koa-body 3、上传文件的具体操作 4、前端ajax请求代码 ......
1、安装koa-body
2、引入koa-body
const koa = require('koa'); const fs = require('fs'); const koabody = require('koa-body'); const route = require('koa-route'); let app = new koa(); app.use(koabody( { multipart: true, formidable: { maxfilesize: 200*1024*1024 } }));
3、上传文件的具体操作
const uploadfile = ctx => { const filename = ctx.request.body.name; const file = ctx.request.files.file; // 创建可读流 const render = fs.createreadstream(file.path); let filepath = path.join(config.base_path, 'upload/',filename+'.'+file.name.split('.').pop()); const filedir = path.join(config.base_path, 'upload/'); if (!fs.existssync(filedir)) { fs.mkdirsync(filedir, err => { console.log(err) console.log('创建失败') }); } // 创建写入流 const upstream = fs.createwritestream(filepath); render.pipe(upstream); ctx.body = '上传成功' }
4、前端ajax请求代码
<body> <div> <form> <input type="text" class="filename"> <input type="file" name="file" class="imgpath"> <div class="submitbtn">提交</div> </form> </div> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.submitbtn').on('click',() => { var params = new formdata(); params.append('name',$('.filename').val()) params.append('file',$('.imgpath')[0].files[0]) $.ajax({ data: params, url: '/uploadfile', type: 'post', processdata: false, contenttype: false, success: function(res) { console.log(res) } }) }) }) </script> </body>
上一篇: 安卓开发笔记(二十七):实现轮播文字消息
下一篇: 网站交互、开发方式和前端框架介绍