vue实现文件夹和文件的上传-Go服务器开发

要在Vue中实现文件夹和文件的上传，你可以使用HTML5的File API和axios库来完成。以下是一个简单的示例代码：

在Vue组件中添加文件上传的表单：

<template>
  <div>
    <input type="file" multiple @change="handleFileChange">
    <button @click="uploadFiles">上传</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedFiles: []
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFiles = event.target.files;
    },
    uploadFiles() {
      const formData = new FormData();
      
      // 遍历选择的文件并添加到FormData对象
      for (let i = 0; i < this.selectedFiles.length; i++) {
        formData.append('files[]', this.selectedFiles[i]);
      }
      
      // 发送POST请求，将FormData发送到服务器
      axios.post('/upload', formData, {
        headers: { 'Content-Type': 'multipart/form-data' }
      })
        .then(response => {
          // 处理上传成功后的响应
          console.log(response.data);
        })
        .catch(error => {
          // 处理上传失败时的错误
          console.error(error);
        });
    }
  }
};
</script>

在服务器端（如Node.js）接收并处理上传的文件：

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

// 创建Express应用程序
const app = express();

// 设置存储引擎和目标目录，这里使用multer存储到磁盘上的uploads文件夹
const storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, 'uploads/');
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname);
  }
});
const upload = multer({ storage });

// 定义上传的路由
app.post('/upload', upload.array('files[]'), (req, res) => {
  // 处理上传的文件，可以在这里保存到数据库或进行其他操作
  
  res.status(200).json({ message: '上传成功' });
});

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

上述示例代码演示了基本的文件上传功能，你可以根据需要进行修改和扩展。记得在Vue项目中引入axios库，并根据实际情况修改接收上传文件的后端路由路径和目录配置。

内容由零声教学AI助手提供，问题来源于学员提问