技术指南：Vue实战多文件上传，直达高效文件管理

2023-11-17 09:32:13

前言

文件上传功能在现代网络应用中扮演着至关重要的角色，它使我们能够轻松地将本地文件传输到服务器，实现数据的交换和存储。本文将以Vue.js为前端框架，带领大家一步步实现多文件上传功能，并提供相应的后端代码。

前端代码

1. 构建表单

首先，我们需要创建一个表单来收集用户选择的文件。表单中应包含一个文件输入元素，以及必要的提交按钮。以下代码演示了如何使用Vue.js构建一个简单表单：

<template>
  <form @submit.prevent="submitForm">
    <input type="file" multiple @change="handleFileSelect">
    <button type="submit">上传文件</button>
  </form>
</template>

<script>
export default {
  methods: {
    handleFileSelect(event) {
      // 处理文件选择事件
    },
    submitForm(event) {
      // 表单提交事件
    }
  }
}
</script>

2. 处理文件选择

当用户选择文件后，我们需要在前端处理文件选择事件，并将其存储在Vue.js的data中。以下代码演示了如何处理文件选择事件：

handleFileSelect(event) {
  this.files = event.target.files;
}

3. 上传文件

当用户点击提交按钮时，我们需要使用AJAX将选中的文件上传到服务器。以下代码演示了如何使用Vue.js上传文件：

submitForm(event) {
  const formData = new FormData();
  for (let i = 0; i < this.files.length; i++) {
    formData.append('file', this.files[i]);
  }

  axios.post('/upload', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((response) => {
    // 处理服务器响应
  }).catch((error) => {
    // 处理错误
  });
}

后端代码

在后端，我们需要提供一个路由来处理文件上传请求。以下代码演示了如何在Node.js中处理文件上传：

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

const app = express();

const storage = multer.diskStorage({
  destination: './uploads/',
  filename: (req, file, cb) => {
    cb(null, Date.now() + '-' + file.originalname);
  }
});

const upload = multer({ storage: storage });

app.post('/upload', upload.array('file'), (req, res) => {
  res.json({
    success: true,
    message: 'Files uploaded successfully!'
  });
});

app.listen(3000);