nodejs实现文件上传功能

最新推荐文章于 2025-02-28 18:30:46 发布

ZhuAiQuan

最新推荐文章于 2025-02-28 18:30:46 发布

阅读量5.3k

点赞数 3

分类专栏： Nodejs 文章标签： node.js

本文链接：https://blog.youkuaiyun.com/ZhuAiQuan/article/details/124404445

版权

Nodejs 专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何利用Koa2和前端 axios 实现图片上传功能，前端通过 input file 组件选择图片，然后通过 formData 发送到后端。后端使用 koa-body 捕获上传文件，通过 fs 和路径操作将图片保存，并返回服务器上的图片地址。同时，通过 koa-static 设置静态资源目录，使前端能够访问上传后的图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于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}`
  }
})