koa的服务端渲染

目标:使用koa完成,上传图片,查看文件,下载文件.

需要的包

    "dayjs": "^1.11.5",
    "fse": "^4.0.1",
    "koa": "^2.13.4",
    "koa-body": "^5.0.0",
    "koa-router": "^12.0.0",
    "koa-static": "^5.0.0"

任务拆解

创建了4个接口,上传 api/upload,下载 api/view?file=name&download=1,查看,查看列表
这里允许下载的话需要一个设置一个请求头 ctx.set("Content-Disposition", "attachment;filename=" + filename);
我们直接把图片放在代码中的静态文件夹upload中,html文件放在static中,这样就直接不存在跨域问题,服务端渲染有个屁跨域,
这里可以使用ejs,但是我没用,我通过访问那个接口自己搞了渲染.
图片上传给浏览器后,浏览器会在c盘创建个地方用来存图片,你把这个图片复制到你的静态文件夹,就可以通过后台端口直接访问,但是我们要用api来访问.
进行上传文件时候要生成一些数据,然后存入一个data.json文件中,字段包括,图片原名称,新名词,创建时间,

白吃问题

哎呀,这个fs怎么读取json文件,操作object类型啊.

答: obj.list = [name:'阿巴巴巴'] -> obj就插入了一个list数据. 并且,一定要看看arr.push的返回值是啥,你不能返回值来赋值啊, push后原对象就变了正常

哎呀,这个图片上传之后在上传怎么会包path路径不是字符串的错误呀

答: data = new FormData();data.append("file", file); 你的data要在每次又上传的时候重新new,不让他到后面是个数组吧, 通过观察后台拿到的file类型推测,反正改完就好了.

记录: fetch的用法.

fetch("http://localhost:3001/api/upload", {
  method: "post",
  body: data,
})
  .then((response) => response.json())
  .then((response) => {
    const { url, orname } = response;
    name.value = orname;
    urlNode.value = url;
    getlist();
  });

个人记录

笨蛋教程第一寄

koa的服务端渲染