后端“fastapi”+前端“vue3+ts+ElementPlus”上传文件到uploads目录

点击全文阅读

一、后端fastapi

确保已安装好python3和fastapi

python -m pip install 'fastapi[all]'

mail.py

from fastapi import FastAPI, File, UploadFilefrom fastapi.responses import FileResponseimport osapp = FastAPI()@app.post("/upload")async def create_upload_file(file: UploadFile = File(...)):    dirs = 'uploads'    # 判断uploads目录是否存在，否则新建uploads目录    if not os.path.exists(dirs):        os.makedirs(dirs)    # 保存上传文件到uploads目录    file_location = f"{dirs}/{file.filename}"    with open(file_location, "wb") as file_object:        file_object.write(file.file.read())    return {"filename": file.filename}

运行fastapi服务器

python -m uvicorn main:app --reload

使用浏览器访问 http://127.0.0.1:8000/http://127.0.0.1:8000/docs

二、前端vue3

确保已安装node.js和yarn

npm install -g yarn

使用vite初始化前端目录

PS C:\Users\airdot\source\repos\testweb> yarn create viteyarn create v1.22.21[1/4] Resolving packages...[2/4] Fetching packages...[3/4] Linking dependencies...[4/4] Building fresh packages...success Installed "create-vite@5.0.0" with binaries:      - create-vite      - cva√ Project name: ... web√ Select a framework: » Vue√ Select a variant: » TypeScriptScaffolding project in C:\Users\airdot\source\repos\testweb\web...Done. Now run:  cd web  yarn  yarn devDone in 5.55s.PS C:\Users\airdot\source\repos\testweb>cd webPS C:\Users\airdot\source\repos\testweb\web>yarn

 安装element-plus

yarn add element-plus

main.ts中导入element-plus

import { createApp } from 'vue'import ElementPlus from 'element-plus'import 'element-plus/dist/index.css'import App from './App.vue'const app = createApp(App)app.use(ElementPlus)app.mount('#app')

 修改vite.config.ts配置“CORS 跨域”

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({  plugins: [vue()],  server:{    host:"127.0.0.1",    port:7001,    open:true,        proxy:{      '/api':{        target:"http://localhost:8000/",        changeOrigin:true,        rewrite: (path) => path.replace(/^\/api/, '')      }    }  }})

修改App.vue

<template>  <el-upload     ref="upload"     class="upload-demo"     action="api/upload"     :limit="1"     :on-exceed="handleExceed"    :auto-upload="false">    <template #trigger>      <el-button type="primary">select file</el-button>    </template>    <el-button class="ml-3" type="success" @click="submitUpload">      upload to server    </el-button>    <template #tip>      <div class="el-upload__tip text-red">        limit 1 file, new file will cover the old file      </div>    </template>  </el-upload></template><script lang="ts" setup>import { ref } from 'vue'import { genFileId } from 'element-plus'import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'const upload = ref<UploadInstance>()const handleExceed: UploadProps['onExceed'] = (files) => {  upload.value!.clearFiles()  const file = files[0] as UploadRawFile  file.uid = genFileId()  upload.value!.handleStart(file)}const submitUpload = () => {  upload.value!.submit()}</script>

运行

yarn dev

使用浏览器访问 http://127.0.0.1:7001/

点击全文阅读