Python前后端分离架构中如何实现文件上传功能

在Python前后端分离架构中实现文件上传，关键在于前后端通过API接口进行文件数据的传输。这里以FastAPI作为后端框架，Vue.js作为前端框架为例，提供一个完整的实现方案。

后端实现 (FastAPI)

首先，安装必要的库：

pip install fastapi uvicorn python-multipart

后端核心代码 (main.py)：

from fastapi import FastAPI, File, UploadFile
from fastapi.middleware.cors import CORSMiddleware
import os
import uuid

app = FastAPI()

# 处理CORS，允许前端跨域请求
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # 生产环境应指定具体的前端地址
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# 确保上传目录存在
UPLOAD_DIR = "uploads"
os.makedirs(UPLOAD_DIR, exist_ok=True)

@app.post("/upload/")
async def upload_file(file: UploadFile = File(...)):
    """
    文件上传接口
    """
    # 生成唯一文件名，避免覆盖
    file_extension = os.path.splitext(file.filename)[1]
    unique_filename = f"{uuid.uuid4()}{file_extension}"
    file_path = os.path.join(UPLOAD_DIR, unique_filename)

    # 保存文件到服务器
    try:
        contents = await file.read()
        with open(file_path, "wb") as f:
            f.write(contents)
    except Exception as e:
        return {"success": False, "message": f"文件保存失败: {str(e)}"}
    finally:
        await file.close()

    # 返回文件访问信息
    return {
        "success": True,
        "message": "文件上传成功",
        "filename": unique_filename,
        "original_filename": file.filename,
        "file_path": f"/uploads/{unique_filename}"  # 假设配置了静态文件服务
    }

# 启动服务：uvicorn main:app --reload

前端实现 (Vue.js)

前端使用axios库发送包含文件的POST请求。

核心组件代码 (FileUpload.vue)：

<template>
  <div>
    <input type="file" @change="handleFileChange" ref="fileInput" />
    <button @click="uploadFile" :disabled="!selectedFile">上传</button>
    <p v-if="uploadStatus">{{ uploadStatus }}</p>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'FileUpload',
  data() {
    return {
      selectedFile: null,
      uploadStatus: ''
    };
  },
  methods: {
    handleFileChange(event) {
      this.selectedFile = event.target.files[0];
    },
    async uploadFile() {
      if (!this.selectedFile) return;

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

      try {
        // 替换为你的后端API地址
        const response = await axios.post('http://localhost:8000/upload/', formData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        });

        if (response.data.success) {
          this.uploadStatus = `上传成功！文件名：${response.data.filename}`;
          // 清空文件选择
          this.$refs.fileInput.value = '';
          this.selectedFile = null;
        } else {
          this.uploadStatus = `上传失败：${response.data.message}`;
        }
      } catch (error) {
        console.error('上传出错:', error);
        this.uploadStatus = '上传失败，请检查网络或服务器状态';
      }
    }
  }
};
</script>

关键点说明

1. 后端使用UploadFile类型接收文件，它会将文件内容存储在内存或临时文件中，适合处理大文件。
2. 前端使用FormData对象包装文件数据，并通过multipart/form-data格式发送。
3. CORS配置是前后端分离项目的必备项，确保前端能跨域调用后端API。
4. 文件存储时使用uuid生成唯一文件名，防止文件名冲突和安全问题。

总结建议

核心就是后端提供接收multipart/form-data的API，前端用FormData发请求。

docker 一个 fastdfs 系统，在 storage 上搭个 nginx 提共静态文件服务，可以试试