• 我转过几个弯 绕过那个小雨楼
  • 拿着蒲扇摆着衣衫渡着紧箍咒
  • 不问天涯不停留 喝过几壶酒
  • 不过年少白头道义放胸口
  • 倘若明天之后 遥看前尘剑封侯
  • 似那天上神仙无所求
  • 朝朝暮暮君如梦醒十分不为何理由
  • 是真是假是惶恐是无休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 又过了几个弯 算尽天量道莫慌
  • 踏这田园闻这芳草香
  • 跌跌撞撞仗剑天涯折煞不枉无笔良
  • 是梦是幻是温柔是家乡
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 路过这风雨花满楼 片刻都不停留
  • 我本这书生进京赶考留下许多愁
  • 你问有没有时候 我叹这天道默悠悠
  • 能否与我一醉方休
  • 谁能与我一醉方休

koa框架28 上传文件

181 0

fields中的文件数据

上传过来的文件存放在ctx.request.fields里面,他是一个数组。

fields大概数据如下:

img: [
    File {
        _events: [Object: null prototype] {},
        _eventsCount: 0,
        _maxListeners: undefined,
        size: 86516,
        path: 'E:\\代码\\koa-web\\upload\\upload_13de2b1692363e80c2a838f1744ae9ce',
        name: 'QQ截图20200903154421.jpg',
        type: 'image/jpeg',
        hash: null,
        lastModifiedDate: 2020 - 09 - 04 T11: 09: 20.750 Z,
        _writeStream: [WriteStream],
        [Symbol(kCapture)]: false
    }
]

img为表单元素的name,注意,一定要设置name,不然获取不到值,然后img为一个数组。

其中path后段文本为上传过来的文件名,且没有格式后缀,文件名也是一个全局唯一值。

存储文件的话,一般都是存储upload_13de2b1692363e80c2a838f1744ae9ce这个名字,但是此时他在path里面,是一串路径,我们需要进行提取。

提取文件名

const path = require("path");


const name = path.basename(ctx.request.fields["img"][0].path);

console.log(name)   
// upload_13de2b1692363e80c2a838f1744ae9ce

我们需要引入path这个模块,利用的他basename方法,把文件路径传进去,就能得到文件名了

过滤

由于使用了koa-better-body插件,实际上会有一个问题,哪怕用户不上传文件,body已经会创建一个size为0的文件丢到upload文件夹中,所以,不管上传不上传文件,body都会有文件,所以我们进行过滤。

分两步:

  1. 删除文件夹中的文件
  2. 文件名过滤
const fs = require("promise-fs");

const imgArr = ctx.request.fields["img"];

imgArr.forEach(async img => {
    if (!img.size) {
        await fs.unlink(img.path);
    }
});

const name = imgArr.filter(img => {
   return img.size
});

console.log(name)

我们使用promisi-fs插件进行删除文件,因为是个异步的,所以不能放在filter函数里面一起,因为filter是一个需要立即返回数据的函数,不然就会出现问题,所以我们在筛选之前做个遍历,把size等于0的文件删除。

然后再通过筛选,选出size大于0的文件数组。

过滤的一些问题

对于这个koa-better-body其实也不是每次上传,没有上传文件就会生成一个0字节的文件,有时候他可能没有,没有的话,我们删除文件的操作就可能出错,所以我们要对删除操作做一个try-catch包裹

imgArr.forEach(async img => {
    if (!img.size) {
      try {
        await fs.unlink(img.path);
      }catch(e){
        console.log(e);
      }  
    }
});

数据库写入的方法(数据库方法补充)

由于我们可能会有很多个字段的上传,比如title,subtitle,还有更多,我们可以将字段名保存为一个数组。

const nameArr = ["title","subtitle"];

保存为数组之后,我们需要考虑到数据,所以数据也必须是一个数组,且顺序就等于name数组的顺序,值是对应的。

这样我们就可以使用这种写法

ctx.db.query(`UPDATE 表名 SET ${nameArr.map(n => n+"=?").join(",")} WHERE id=?`,[...valueArr,id]);

利用map方法,map是遍历一个数组,再把修改好的值生成一个新的数组,这样我们就生成了一个[name=?,name=?]这种形式的数组,再通过join转为逗号字符。

然后对应的值通过es6语法释放在一个数组里面,后面还能在添加新值。

这种写法,可以大大的提供多个值修改时的写法,想对来着,这种用法,其实还有有一个前缀,就是name和value都是数组且一一对应的。

为了达到这种情况,我们可以写一个复用的方法,中间件啥的,对name和value做一个统一操作,然后通过ctx对象数据沟通。

修改没有填写内容的字段

比如说有一个字段,他不是必填的,然后用户上传时这个字段的值为空,那么会有两种情况,要么用户就是删除内容,要么是漏写了,不想写,想用旧的。

对于这种情况我们也需要考虑,我们是用新值呢还是旧值,特别是上传文件的那种,用户不可能每次修改都选择一个文件,有可能这个文件他不想改,那么这个文件字段就是空了。

所以可以这样,如果是文本类型,用户传什么就更新什么,空也好,不空也好。

如果文件类型,那么就判断是否为空,空的话就不进行更新。

文件读取

之前我们设置的静态文件读取都是通过static模块,自动读取static文件夹里的文件,但是如果上传的文件,他是在upload目录,所以static并不适用,所以我们需要创建一个专门读取upload文件夹的路由

为什么不放在static里面呢,因为static里面任何人都能拿到,如果是一个vip文件,那不是普通用户也能获取了,所以我们创建一个路由,在路由里面我们可以进行判断。

router.get("/upload",async ctx=>{
  
});

在这个路由路由里面我们进行返回数据,这里我们还需要使用到一个插件

koa-send

安装

npm i koa-send -D

使用

const send=require('koa-send');
const {upload_dir}=require('../config');


router.get("/upload/:img",async ctx=>{
  let img=ctx.params.img;

  await send(ctx, img, {
    maxage: 60*86400*1000,
    immutable: true,
    root: upload_dir
  });
});

send他也是一个异步的方法,用于发送文件,他有三个参数,第一个为ctx对象,第二个为要发送的文件名,第三个为配置参数。

  1. maxage 缓存时间 ms
  2. immutable 是否长期不变,如果文件不改的,可以开这个
  3. root 这个为根目录,也就是upload路径,我们从config里面拿到路径
  4. gzip 是否进行压缩,默认是true,不要可以关闭

图片的文件名,他是没有后缀格式的,因为我们上传的时候只是把他的文件名存在sql,现在读取的时候,也没有设置后缀格式,但是浏览器依旧可以读取到图片,并且显示。

文件后缀

我们可以通过name属性拿到后缀

let format = name.split(".");
format=formatp[format.length-1];

这样,我们可以在存的时候拿到这个后缀,然后对上传过来的文件进行修改,也可以通过这个后缀判断是否是我们需要的文件格式。

0
  • 本文分类:Node
  • 本文标签:nodekoa
  • 流行热度:已超过 181 人围观了本文
  • 最后更新:2020年09月5日 - 0时33分10秒
  • 发布日期:2020年09月5日 - 0时33分10秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

相关文章

微信收款码
微信收款码