koa保存图片上传

Question

koa保存图片上传

前台vue element 的上传图片组件，后台koa

当后端接收到前台的操作后，我需要如何来处理它呢？

const router = require("koa-router")();
const routes = router.post("/img-single", uploadSingleImg);
const path = require("path");
const fs = require("fs");
function uploadSingleImg(ctx) {

const file = ctx.request.files.file;
console.log(file);
const reader = fs.createReadStream(file.path);
let filePath = path.join(
    __dirname,
    "/public/images/upload/" + `${file.name}`
);
const upStream = fs.createWriteStream(filePath);
reader.pipe(upStream);

console.log(file);
console.log("上传单个图片");
ctx.body = "11";

}

module.exports = routes;

中间件使用的是koa-body

问题如下：

1. 要如何将这个上传的路径改为 项目目录下的public/images/upload，以及大佬开发中，上传的图片应该如何命名，据说有啥时间啥之类的。
2. 我后台接收到的关于图片的是一些什么信息， 哪些是用来在读入流中的数据，能不能介绍一下，相应的这些信息。
3. 如果后台成功存入后，我前台要怎么访问到这些图片的地址？

Answer 1

图片访问需要用到静态服务资源，即下图标示的1，下述不到50行代码演示上传成功展示图片

const logger = require("koa-logger")
const serve = require("koa-static")
const koaBody = require("koa-body")
const Koa = require('koa')
const fs = require("fs")
const app = new Koa()
const os = require("os")
const path = require("path")
app.use(logger())
// 使用中间件解析
app.use(koaBody({ multipart: true }))

// 1.静态资源服务，对外提供图片访问
app.use(serve(path.join(__dirname, '/public')));
app.use(async function (ctx, next) {
    await next()
    if (ctx.body || !ctx.idempotent) return;
    ctx.body = {
        title: '404 not pic'
    }
})

// 2. 文件上传
app.use(async function (ctx, next) {
    if ('POST' != ctx.method) return await next()
    // 获取图片源
    //  <input type="file" name="file" multiple>
    const file = ctx.request.files.file
    // 接收读出流
    const reader = fs.createReadStream(file.path)
    // 创建写入流 3. 指定图片路径文件名
    const stream = fs.createWriteStream(path.join('public/images', file.name))
    // 用管道将读出流 "倒给" 输入流
    reader.pipe(stream)
    // 4.文件访问路径
    console.log('uploading %s -> %s', file.name, stream.path)

    // 6.换成web入口，静态服务器访问地址
    ctx.redirect(stream.path.substr(6).replace(/\\/g,'/'))
})

// 监听
app.listen(3000, () => {
    console.log("listening port 3000");
})

post上传图片，file类型字段名file，上传目录public/images,记录如下

D:\code-base\node\framework\koa>node app.js
listening port 3000
  <-- POST /
uploading 34.jpg -> public\images\34.jpg
/images/34.jpg
  --> POST / 404 40ms -

至于上传文件接收到的文件信息，参见ts说明 ，即File类型对象，存在下述6个属性1个方法

export interface File {
    size: number;
    path: string;
    name: string;
    type: string;
    lastModifiedDate?: Date;
    hash?: string;

    toJSON(): Object;
}

Answer 2

我的上传图片功能，没有再app.js里面，在router文件夹下，这样的话，我怎么指定到根目录到/public呢？