vue中上传文件

在Vue中上传文件可以通过以下步骤实现：

创建一个表单，包含一个文件选择器和一个提交按钮。

<template>
  <form @submit.prevent="uploadFile">
    <input type="file" ref="fileInput" />
    <button type="submit">上传文件</button>
  </form>
</template>

在Vue组件中定义一个方法来处理文件上传。使用FormData API将文件数据和其他表单数据一起发送到服务器。

<script>
export default {
  methods: {
    async uploadFile() {
      const fileInput = this.$refs.fileInput;
      const file = fileInput.files[0];

      const formData = new FormData();
      formData.append("file", file);

      const response = await fetch("/api/upload", {
        method: "POST",
        body: formData
      });

      console.log(await response.text());
    }
  }
};
</script>

在服务器端设置一个API来接收上传的文件。可以使用Multer库来处理文件上传。

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

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

app.post("/api/upload", upload.single("file"), (req, res) => {
  console.log(req.file);
  res.send("File uploaded successfully");
});

app.listen(3000, () => {
  console.log("Server started on port 3000");
});

完成以上步骤后，就可以在Vue应用中上传文件了。