百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术分类 > 正文

fastapi+vue3文件上传(vue文件上传功能)

ztj100 2025-03-19 18:44 15 浏览 0 评论

最近构思实现了一个小demo网站,前端上传文件,后端分析文件,最后前端展示,整个过程还是蛮有意思的,刚刚开始学习网站开发,还有很多不会的地方,这里演示fastapi+vue3文件上传,上传的excel文件直接存入mongo中,读也是从mongo中读。

后台代码:

#!/usr/bin/env python
# -*- coding: utf-8 -*-
# @Time    : 2024/1/19 09:20
# @Author  : ailx10
# @File    : main.py

# main.py
from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
import pandas as pd
from pymongo import MongoClient
import io
from fastapi import File, UploadFile
from fastapi.responses import JSONResponse

app = FastAPI()

# CORS 设置,允许所有来源访问,生产环境时应根据需要进行调整
origins = ["*"]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


client = MongoClient("mongodb://admin:passwd@localhost:27017/")
db = client.alarm_analysis
collection = db.raw_sample


@app.get("/get_samples/{page}")
async def get_samples(page: int):
    skip = (page - 1) * 10
    samples = collection.find().skip(skip).limit(10)

    # 转换 ObjectId 为字符串
    samples = [{**sample, "_id": str(sample["_id"])} for sample in samples]

    total_samples = collection.count_documents({})  # 获取总样本数

    return JSONResponse(content={"data": samples, "total": total_samples})


@app.post("/upload_excel")
async def upload_excel(file: UploadFile = File(...)):
    contents = await file.read()
    df = pd.read_excel(io.BytesIO(contents))

    samples = df.to_dict(orient="records")
    result = collection.insert_many(samples)

    return {"inserted_ids": [str(id) for id in result.inserted_ids]}

前端代码:

// HelloWorld.vue



<script>
import axios from 'axios';

export default {
  data() {
    return {
      samples: [],
      page: 1,
      totalPage: 1,
    };
  },
  mounted() {
    this.loadSamples();
  },
  computed: {
    filteredKeys() {
      // 获取样本的键,排除 _id 和 sheet
      return Object.keys(this.samples[0] || {}).filter(key => key !== '_id' && key !== 'sheet');
    },
  },
  methods: {
    async uploadExcel(event) {
      const file = event.target.files[0];
      const formData = new FormData();
      formData.append('file', file);

      // 使用代理配置的URL
      await axios.post('/api/upload_excel', formData);

      // 重新加载样本数据
      this.page = 1;
      this.samples = [];
      this.loadSamples();
    },
    async loadSamples() {
      const response = await axios.get(`/api/get_samples/${this.page}`);
      this.samples = response.data.data;

      // 计算总页数,假设每页显示10行
      this.totalPage = Math.ceil(response.data.total / 10);
    },
    validatePage() {
      // 确保输入页码在有效范围内
      if (this.page < 1 this.page='1;' else if this.page> this.totalPage) {
        this.page = this.totalPage;
      }
    },
    prevPage() {
      if (this.page > 1) {
        this.page -= 1;
        this.loadSamples();
      }
    },
    nextPage() {
      if (this.page < this.totalPage) {
        this.page += 1;
        this.loadSamples();
      }
    },
  },
};
</script>

代理配置:

// vue.config.js

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    open:true,        
    host:'localhost',        
    port:8080,        
    https:false,       
    proxy: {
      '/api': {
        target: 'http://localhost:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
  }
})

相关推荐

Docker安全开放远程访问连接权限(docker 远程授权访问)

1、Docker完全开放远程访问Docker服务完全开放对外访问权限操作如下:#开启端口命令(--permanent永久生效,没有此参数重启后失效)firewall-cmd--zone=pu...

SpringCloud系列——4OpenFeign简介及应用

学习目标什么是OpenFeign以及它的作用RPC到底怎么理解OpenFeign的应用第1章OpenFeign简介在前面的内容中,我们分析了基于RestTemplate实现http远程通信的方法。并...

Spring Boot集成qwen:0.5b实现对话功能

1.什么是qwen:0.5b?模型介绍:Qwen1.5是阿里云推出的一系列大型语言模型。Qwen是阿里云推出的一系列基于Transformer的大型语言模型,在大量数据(包括网页文本、书籍、代码等)...

JDK从8升级到21的问题集(jdk8升级到11)

一、背景与挑战1.升级动因oOracle长期支持策略o现代特性需求:协程、模式匹配、ZGC等o安全性与性能的需求oAI新技术引入的版本要求...

大白话详解Spring Cloud服务降级与熔断

1.Hystrix断路器概述1.1分布式系统面临的问题复杂分布式体系结构中的应用程序有数十个依赖关系,每个依赖关系在某些时候将不可避免地失败。这就造成有可能会发生...

面试突击43:lock、tryLock、lockInterruptibly有什么区别?

在Lock接口中,获取锁的方法有4个:lock()、tryLock()、tryLock(long,TimeUnit)、lockInterruptibly(),为什么需要这么多方法?这些方法都有...

了解网络编程 TCP/IP 协议与UDP 协议

因为iP地址比较难记忆,很多情况下可以使用域名代替iP地址。1.TCP/IP协议与UDP协议通过IP地址与端口号确定计算机在网络中的位置后,接下来考虑通讯的问题:因为不同计算机的软硬件平台...

Semaphore与Exchanger的区别(semaphore和signal)

Semaphore和Exchanger是Java并发编程中两个常用的同步工具类,它们都可以用于协调多个线程之间的执行顺序和状态,但它们的作用和使用方式有所不同:Semaphore类表示一个...

Java教程:什么是分布式任务调度?怎样实现任务调度?

通常任务调度的程序是集成在应用中的,比如:优惠卷服务中包括了定时发放优惠卷的的调度程序,结算服务中包括了定期生成报表的任务调度程序...

java多线程—Runnable、Thread、Callable区别

多线程编程优点:进程之间不能共享内存,但线程之间共享内存非常容易。系统创建线程所分配的资源相对创建进程而言,代价非常小。Java中实现多线程有3种方法:继承Thread类实现Runnable...

工厂模式详解(工厂模式是啥意思)

工厂模式详解简单工厂简单工厂模式(SimpleFactoryPattern)是指由一个工厂对象决定创建出哪一种产品类的实例。简单工厂适用于工厂类负责创建的对象较少的场景,且客户端只需要传入工厂类的...

我们程序员眼中的母亲节(你眼中的程序员是什么样子的?程序员的薪酬如何?)

导语:对于我们成人来说,尤其是漂泊在外的程序员,陪伴父母的时间太少了。每逢佳节倍思亲,我们流浪外在的游子应该深有感触。母亲,是世界上最伟大的人,她承载着对我们的爱,更是负担和压力。我们作为子女,只会嫌...

死锁的 4 种排查工具(死锁检测方法要解决两个问题)

死锁(DeadLock)指的是两个或两个以上的运算单元(进程、线程或协程),都在等待对方停止执行,以取得系统资源,但是没有一方提前退出,就称为死锁。死锁示例接下来,我们先来演示一下Java中最简...

1. 工厂模式详解(工厂模式示例)

我们的项目代码也是由简而繁一步一步迭代而来的,但对于调用者来说却是越来越简单化。简单工厂模式简单工厂模式(SimpleFactoryPattern)是指由一个工厂对象决定创建出哪一种产品类的实例。...

Jmeter(二十):jmeter对图片验证码的处理

jmeter对图片验证码的处理在web端的登录接口经常会有图片验证码的输入,而且每次登录时图片验证码都是随机的;当通过jmeter做接口登录的时候要对图片验证码进行识别出图片中的字段,然后再登录接口中...

取消回复欢迎 发表评论: