Node.js学习笔记【八】
上传图片
上传图片的功能点
- 基础功能：上传图片、生成图片链接
- 附加功能：限制上传图片的大小与类型、生成高中低三种分辨率的图片链接、生成CDN
上传图片的技术方案
- 阿里云OSS等云服务，推荐在生产环境下使用（功能多，速度快，需要收费）
- 直接上传到服务器，不推荐在生产环境下中使用（不稳定，分布式环境支持不是很好，不需要收费，适合学习中使用）
使用koa-body中间件获取上传的图片
操作步骤
- 安装
koa-body（既支持文件，又支持JSON和form），替换koa-bodyparser（只支持JSON和form两种格式的请求体，不支持文件这种格式） - 设置图片上传目录
- 使用Postman上传文件
使用npm i koa-body --save安装koa-body；使用npm uninstall koa-bodyparser --save卸载koa-bodyparser。
在index.js引入使用
const koaBody = require('koa-body');
app.use(koaBody({
//支持文件
multipart:true,
formidable:{
//设置目录
uploadDir:path.join(__dirname,'/public/uploads'),
//保留拓展名
keepExtensions:true
}
}));
在controllers->users.js定义上传方法
upload(ctx){
const file = ctx.request.files.file;
ctx.body = { path:file.path };
}
在routes->home.js设置接口
const {index,upload} = require('../controllers/home')
router.post('/upload',upload)
测试结果：
使用koa-static中间件生成图片链接
操作步骤
- 安装
koa-static：这个中间件可以帮助我们生成静态服务，它指定了一个文件夹，文件夹下所有的文件可以通过http服务来访问。 - 设置静态文件目录
- 生成图片链接
使用npm i koa-static --save安装
在index.js引入使用
const koaStatic = require('koa-static');
app.use(koaStatic(path.join(__dirname,'public')));
在controllers->home.js编写代码生成图片链接
const path = require('path');
class HomeCtl {
index(ctx){
ctx.body = '<h1>这是主页</h1>';
}
upload(ctx){
const file = ctx.request.files.file;
const basename = path.basename(file.path);
ctx.body = { url:`${ctx.origin}/uploads/${basename}`};
}
}
可以看到上传图片成功后就返回了一个图片链接
编写前端页面上传文件
操作步骤
- 编写上传文件的前端页面：上传文件的表单
- 与后端接口联调测试
在public下创建upload.html
<form action="/upload" enctype="multipart/form-data" method="POST">
<input type="file" name="file"><br>
<button type="submit">上传</button>
</form>
打开网页：localhost:端口号/upload.html进行图片上传
可以在input实现限制图片类型
<input type="file" name="file" accept="image/png,image/jpeg">//或者写成.jpg,.png,/jpeg
支持所有图片类型为image/*
