基于koa2 实现前端上传图片到服务器的功能；

前端部分我们就用原生input file上传 通过change事件手动触发上传事件

<input type="file" ref="file" accept="images/*" @change="onChange" multiple />

js 这里以上传一张图片为例

	function onChange() {
      const list = (file.value as HTMLInputElement).files as FileList;
      //for (let i = 0; i < list.length; i++) {
      //  upload.files.push(URL.createObjectURL(list[i]));
      // }
      // store.updateImageList(upload.files);
      if (list.length) {
        const formData = new FormData();
        formData.append("file", list[0]);
        axios.post("http://localhost:9008/upload", formData).then((res) => {
          console.log(res);
        });
      }
    }

Nodejs后端部分
安装并使用koa-body 可以拿到请求为form-data的上传文件

这里我们通过fs createReadStream打开一个流文件并写入到app下的public/temp/uploads里面
返回存好图片的服务器地址给前端

upload.post('/', async ctx => {
  const file = ctx.request.files.file;
  const prefix = file.originalFilename.split('.')[1];
  const reader = fs.createReadStream(file.filepath);
  const filePath = path.join(__dirname, '../public/temp/uploads/') + `${file.newFilename}.${prefix}`;
  const upStream = fs.createWriteStream(filePath);
  reader.pipe(upStream);
  ctx.body = {
    msg: '上传成功',
    filePath: `/temp/uploads/${file.newFilename}.${prefix}`
  }
})

通过koa-static 设置public为静态服务器目录方便前端读取文件
安装并使用koa-static

回到前端请求成功后返回的状态

拼接服务器地址和filePath即可以访问到刚刚上传的图片!