Vue3+ts实现用户上传文件功能，支持单文件上传/多文件上传

2023-12-04 19:03:26

在现代 Web 开发中，文件上传是一个非常常见的功能。本文将详细介绍如何使用 Vue3 和 TypeScript 实现用户上传文件功能，支持单文件上传和多文件上传。

1. 前端实现

1.1 安装依赖

npm install --save vue3-file-uploader

1.2 创建组件

<template>
  <div>
    <file-uploader
      :multiple="multiple"
      :accept="accept"
      @files-added="onFilesAdded"
    />
  </div>
</template>

<script>
import FileUploader from 'vue3-file-uploader';

export default {
  components: {
    FileUploader,
  },
  props: {
    multiple: {
      type: Boolean,
      default: false,
    },
    accept: {
      type: String,
      default: '',
    },
  },
  methods: {
    onFilesAdded(files) {
      // 处理上传的文件
      console.log(files);
    },
  },
};
</script>

1.3 使用组件

<template>
  <div>
    <file-uploader multiple accept="image/*"></file-uploader>
  </div>
</template>

<script>
import FileUploader from './FileUploader.vue';

export default {
  components: {
    FileUploader,
  },
};
</script>

2. 后端实现

2.1 安装依赖

npm install --save multer

2.2 创建路由

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

const app = express();

const upload = multer({ dest: 'uploads/' });

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