vue如何写文件上传的post接口

在 Vue 中，可以使用 `axios` 库来发送 POST 请求来实现文件上传的接口。

首先，需要在页面中添加一个文件上传的表单，如下所示：

<template>
  <div>
    <form @submit.prevent="handleSubmit">
      <input type="file" ref="fileInput" />
      <button type="submit">上传</button>
    </form>
  </div>
</template>

然后，在 Vue 的 `methods` 中添加 `handleSubmit` 方法，该方法使用 `FormData` 对象来创建一个表单对象，将文件上传到服务器。示例代码如下：

import axios from 'axios';

export default {
  methods: {
    async handleSubmit() {
      const file = this.$refs.fileInput.files[0];
      const formData = new FormData();
      formData.append('file', file);

      try {
        const response = await axios.post('/upload', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    }
  }
}

在上面的代码中，我们使用 `FormData` 对象创建一个表单对象，将文件添加到其中，并将该表单对象作为数据发送到服务器。在 `axios.post` 方法的第三个参数中，我们设置了请求头的 `Content-Type` 为 `multipart/form-data`，以便服务器能够正确解析上传的文件。

最后，在服务器端接收该上传接口的 POST 请求，可以使用 Node.js 中的 `multer` 中间件来实现。以下是一个简单的示例代码：

const express = require('express');
const multer = require('multer');

const app = express();
const upload = multer({ dest: 'uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  const file = req.file;
  console.log(file);
  res.send('文件上传成功');
});

app.listen(3000, () => {
  console.log('服务器已启动');
});

在上面的代码中，我们使用 `multer` 中间件来处理上传的文件，并将文件保存在 `uploads/` 目录下。在 `app.post` 方法中，我们使用 `upload.single` 方法来指定上传的文件字段名为 `file`，并在回调函数中处理上传的文件。