前端Vue.js + 后端Koa.js实现图片上传

简介

图片上传是Web开发中一项常见的需求，本文将深入探讨如何使用Vue.js和Koa.js实现图片上传。我们将了解前端和后端的协作，并详细介绍整个流程。

前端：Vue.js

构建前端表单

1. 创建一个包含文件输入元素的表单。
2. 绑定一个方法来处理文件选择事件。

处理文件选择

1. 在文件选择事件处理程序中，获取选定的文件。
2. 使用FormData对象创建一个包含文件数据的表单数据对象。
3. 使用Vue.js的$http服务发送HTTP POST请求，将表单数据作为主体。

后端：Koa.js

路由设置

1. 在Koa.js路由中定义一个用于处理图片上传请求的路由。

处理HTTP请求

1. 在路由处理程序中，解析请求体以获取表单数据。
2. 获取选定的文件并检查其格式和大小。
3. 保存文件到服务器存储中。

响应上传

1. 将上传状态和文件信息作为JSON响应发送给前端。

前后端协作

前端

• 用户选择图像并触发文件选择事件。
• Vue.js使用HTTP POST请求将表单数据发送到后端。

后端

• Koa.js收到请求并处理表单数据。
• Koa.js保存文件并返回上传状态。

代码示例

前端（Vue.js）

// ... Vue.js代码 ...
methods: {
  handleFileSelect(event) {
    const file = event.target.files[0];
    const formData = new FormData();
    formData.append('file', file);
    this.$http.post('/upload', formData)
      .then((response) => {
        // 处理上传成功
      })
      .catch((error) => {
        // 处理上传失败
      });
  }
}

后端（Koa.js）

// ... Koa.js代码 ...
app.post('/upload', async (ctx) => {
  const file = ctx.request.files.file;
  if (!file) {
    ctx.status = 400;
    ctx.body = 'No file uploaded';
    return;
  }
  const filename = file.name;
  const filepath = path.join(__dirname, 'uploads', filename);
  const fileReader = fs.createReadStream(file.path);
  const fileWriter = fs.createWriteStream(filepath);
  await util.promisify(fileReader.pipe(fileWriter));
  ctx.body = {
    status: 'success',
    filename: filename
  };
});