FastAPI与Vue.js实现多文件上传功能

摘要：FastAPI和Vue.js结合可以实现多文件上传功能。FastAPI作为后端框架，负责处理文件上传的逻辑和存储；Vue.js则作为前端框架，提供友好的文件选择和上传界面。通过前后端交互，用户可以轻松实现多文件的选择、上传和预览等功能。这种组合方式具有高效、易用和可扩展性强的特点，适用于各种Web应用场景。

随着互联网的快速发展，前后端分离的开发模式已经成为主流，FastAPI和Vue.js因其各自的优势，被广泛运用于后端API开发和前端页面开发中，FastAPI以其高效、灵活的异步IO特性，在API开发中表现出色；而Vue.js则以其强大的前端框架和组件库，为开发者提供了丰富的工具和手段，本文将介绍如何利用FastAPI和Vue.js实现多文件上传功能。

FastAPI后端实现

1、环境准备

我们需要安装FastAPI和Uvicorn等依赖库，可以通过pip进行安装：

pip install fastapi uvicorn

2、创建FastAPI项目

使用FastAPI，我们可以快速创建一个API项目，我们需要创建一个新的Python文件，例如main.py，并导入必要的库：

from fastapi import FastAPI, UploadFile, File
import os

3、实现文件上传接口

我们需要在FastAPI项目中实现一个文件上传接口，这个接口将接收客户端发送的文件，并将其保存在服务器上，代码如下：

app = FastAPI()
@app.post("/upload/")
async def upload_file(file: UploadFile = File(...)):
    # 获取文件名称和扩展名
    filename = file.filename
    file_ext = os.path.splitext(filename)[1][1:]  # 提取扩展名（去掉点）
    # 生成新的文件名（避免重复）
    base_name = os.path.basename(filename).split('.')[0]  # 提取文件名（不带扩展名）
    new_filename = f"{base_name}_{int(time.time())}.{file_ext}"  # 添加时间戳防止文件名冲突
    # 保存文件到指定目录（这里以当前目录为例）
    file_path = os.path.join('uploads', new_filename)  # 指定保存路径和文件名
    with open(file_path, 'wb') as f:  # 以二进制写模式打开文件并保存上传的文件内容
        f.write(await file.read())  # 从上传的文件中读取内容并写入到本地文件中
    return {'message': 'File uploaded successfully!'}  # 返回上传成功信息给客户端

在上述代码中，我们定义了一个upload_file函数作为POST请求的处理器，该函数接收一个UploadFile对象作为参数，并从该对象中读取文件内容并保存到本地，注意，这里我们使用了异步IO的特性来处理文件上传，以充分利用FastAPI的高效性能，我们还为每个上传的文件生成一个新的文件名（包含时间戳），以避免文件名冲突，我们返回一个包含成功信息的字典给客户端。

Vue.js前端实现

1、环境准备与项目创建

我们需要安装Vue.js的开发环境，可以使用Vue CLI等工具来快速创建一个新的Vue项目，安装完成后，我们可以开始编写前端代码。

2、创建文件选择和上传组件

在Vue项目中，我们可以使用<input>标签来创建一个文件选择组件，当用户选择文件后，我们可以使用<button>标签来触发文件上传操作，代码如下：

<template>
  <div>
    <input type="file" multiple @change="onFileChange" /> <!-- 多文件选择 -->
    <button @click="onUpload">Upload</button> <!-- 文件上传按钮 -->
  </div>
</template>

在上述代码中，我们使用了multiple属性来支持多文件选择，当用户选择文件后，onFileChange方法将被触发，当用户点击“Upload”按钮时，onUpload方法将被触发并执行文件上传操作，这两个方法将在后面的JavaScript代码中定义。

3、实现文件选择和上传逻辑

在Vue组件的JavaScript部分（通常是一个.vue文件），我们需要实现onFileChange和onUpload两个方法，这两个方法将处理用户选择的文件和执行文件上传操作，代码如下：

export default {
  data() {
    return {
      selectedFiles: [] // 存储用户选择的文件列表（数组）
    };
  },
  methods: {
    onFileChange(event) { // 处理用户选择的文件列表（多文件）并存储到selectedFiles中（数组）中）} { // 处理用户选择的文件列表（多文件）并存储到selectedFiles中（数组）中）} { // 处理用户选择的文件