Node.js学习笔记

Posted 2021-08-09 小风车吱呀转

上传图片

上传图片的功能点

• 基础功能：上传图片、生成图片链接
• 附加功能：限制上传图片的大小与类型、生成高中低三种分辨率的图片链接、生成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/*