结合Vue 3 和 Node.js详细讲解文件域是如何实现文件上传功能的

原创已于 2024-11-25 21:53:10 修改 · 1.1k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #node.js #前端

于 2024-11-23 07:00:00 首次发布

vue3 专栏收录该内容

8 篇文章

订阅专栏

在使用文件域file开发上传功能之前，我们要先来了解一下file对象都有哪些属性和方法，以及该如何使用它们。然后我们再通过vue3和nodejs来实现一个文件上传功能。

`<input type="file">`文件域介绍

<input type="file"> 元素是HTML中用于文件上传的主要工具。它提供了一些API和属性，帮助开发者更好地控制文件选择和上传过程。以下是 <input type="file"> 元素的主要API和属性，以及它们的功能：

属性

1. `multiple`

功能：允许用户选择多个文件。
示例：
```
<input type="file" multiple>
```

2. `accept`

功能：指定可接受的文件类型，以逗号分隔的MIME类型列表。

示例：

<input type="file" accept="image/*,video/*">

3. `capture`

功能：指示设备使用媒体捕获机制（如摄像头或麦克风）进行文件选择。

示例：

<input type="file" accept="image/*" capture="camera">

4. `name`

功能：指定表单数据中的键名，用于后端识别。
示例：
```
<input type="file" name="profilePic">
```

方法

1. `click()`

功能：模拟用户点击文件输入框，打开文件选择对话框。

示例：

document.querySelector('input[type="file"]').click();

事件

1. `change`

功能：当文件选择发生变化时触发。

示例：

<input type="file" id="fileInput">
<script>
  document.getElementById('fileInput').addEventListener('change', (event) => {
    const files = event.target.files;
    console.log(files);
  });
</script>

`file`象属性

当用户选择文件后，<input type="file"> 元素的 files 属性会包含一个 FileList 对象，每个 File 对象具有以下属性：

1. `name`

功能：文件的名称。
示例：
```
const fileName = file.name;
```

2. `size`

功能：文件的大小（以字节为单位）。
示例：
```
const fileSize = file.size;
```

3. `type`

功能：文件的MIME类型。
示例：
```
const fileType = file.type;
```

4. `lastModified`

功能：文件最后修改的时间戳。

示例：

const lastModified = file.lastModified;

5. `lastModifiedDate`

功能：文件最后修改的日期（已废弃，建议使用 lastModified）。

示例：

const lastModifiedDate = file.lastModifiedDate;

动手练一练

以下是一个完整的示例，展示了如何使用 <input type="file"> 元素选择文件并将其上传到服务器：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>File Upload Example</title>
</head>
<body>
  <input type="file" id="fileInput" multiple accept="image/*">
  <button id="uploadButton">Upload</button>

  <script>
    document.getElementById('uploadButton').addEventListener('click', async () => {
      const fileInput = document.getElementById('fileInput');
      const files = fileInput.files;

      if (files.length === 0) {
        alert('请选择一个文件');
        return;
      }

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

      try {
        const response = await fetch('http://localhost:3000/upload', {
          method: 'POST',
          body: formData
        });
        const result = await response.json();
        console.log(result);
      } catch (error) {
        console.error('Upload failed:', error);
      }
    });
  </script>
</body>
</html>

在vue3项目中使用文件域结合nodejs，实现文件上传。

前端（Vue 3）

1. 创建文件输入组件

首先，在Vue 3项目中创建一个文件输入组件，用于选择文件并触发上传操作。

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

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const file = ref(null);

const handleFileChange = (event) => {
  file.value = event.target.files[0];
};

const uploadFile = async () => {
  if (!file.value) {
    alert('请选择一个文件');
    return;
  }

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

  try {
    const response = await axios.post('http://localhost:3000/upload', formData, {
      headers: {
        'Content-Type': 'multipart/form-data'
      }
    });
    console.log(response.data);
  } catch (error) {
    console.error('上传失败:', error);
  }
};
</script>

2. 实现分析

模板部分：包含一个文件输入框和一个按钮。文件输入框的@change事件绑定到handleFileChange方法，按钮的@click事件绑定到uploadFile方法。
脚本部分：
- file：一个响应式变量，用于存储选中的文件。
- handleFileChange：当用户选择文件时，将文件存储到file变量中。
- uploadFile：当用户点击上传按钮时，创建一个FormData对象，将文件附加到其中，并使用axios发送POST请求到后端。

后端（Node.js）

1. 安装依赖

首先，确保你已经安装了express和multer：

npm install express multer

2. 配置文件上传

创建一个简单的Express服务器来处理文件上传：

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

const app = express();
const port = 3000;

// 设置存储配置
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    const uploadDir = 'uploads/';
    if (!fs.existsSync(uploadDir)) {
      fs.mkdirSync(uploadDir);
    }
    cb(null, uploadDir);
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + path.extname(file.originalname));
  }
});

// 过滤文件类型
const fileFilter = (req, file, cb) => {
  if (file.mimetype === 'image/jpeg' || file.mimetype === 'image/png') {
    cb(null, true);
  } else {
    cb(new Error('Invalid file type, only JPEG and PNG is allowed!'), false);
  }
};

const upload = multer({ 
  storage: storage, 
  limits: { fileSize: 1024 * 1024 * 5 }, // 限制文件大小为5MB
  fileFilter: fileFilter
});

// 创建文件上传路由
app.post('/upload', upload.single('file'), (req, res) => {
  res.json({ message: 'File uploaded successfully.' });
}, (err, req, res, next) => {
  if (err instanceof multer.MulterError) {
    res.status(400).json({ error: err.message });
  } else if (err) {
    res.status(500).json({ error: 'Something went wrong!' });
  }
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

3. 解释

存储配置：定义了文件的存储位置和文件名的生成规则。
文件过滤：定义了允许上传的文件类型。
Multer配置：设置了存储配置、文件大小限制和文件过滤。
路由处理：创建了一个POST路由/upload，使用multer中间件处理文件上传。成功上传后返回JSON响应，如果有错误则返回相应的错误信息。