vue 文件上传到文件夹

要将vue中的文件上传到文件夹，您需要使用后端技术。具体来说，您需要编写一个后端API来处理上传文件并将其保存到指定的文件夹中。

在前端，您可以使用Vue.js的Axios库来发送文件到服务器。以下是一个示例：

<template>
  <div>
    <input type="file" @change="onFileChange">
    <button @click="uploadFile">上传文件</button>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      file: null,
    };
  },
  methods: {
    onFileChange(event) {
      this.file = event.target.files[0];
    },
    async uploadFile() {
      const formData = new FormData();
      formData.append('file', this.file);

      try {
        const response = await axios.post('/api/upload', formData);
        console.log(response.data);
      } catch (error) {
        console.error(error);
      }
    },
  },
};
</script>

在后端，您需要使用Node.js和Express框架来编写API。以下是一个示例：

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

const app = express();

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '/path/to/your/folder');
  },
  filename: function (req, file, cb) {
    cb(null, file.originalname);
  },
});

const upload = multer({ storage });

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

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

在这个示例中，我们使用了multer库来处理文件上传。我们定义了一个存储对象，它将文件保存到指定的文件夹中。我们还定义了一个upload对象，它使用存储对象来处理文件上传。最后，我们定义了一个API路由，它使用upload对象处理文件上传，并返回一个成功消息。

请注意，在实际应用中，您需要对上传的文件进行验证和安全措施，以确保您的应用程序不会受到攻击。