一、后端fastapi

確保已安裝好python3和fastapi

python -m pip install 'fastapi[all]'

mail.py

from fastapi import FastAPI, File, UploadFile
from fastapi.responses import FileResponse
import os

app = 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服務(wù)器

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 vite
yarn 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: ? TypeScript

Scaffolding project in C:\Users\airdot\source\repos\testweb\web...

Done. Now run:

  cd web
  yarn
  yarn dev

Done in 5.55s.

PS C:\Users\airdot\source\repos\testweb>cd web
PS C:\Users\airdot\source\repos\testweb\web>yarn

?安裝element-plus

yarn add element-plus

main.ts中導(dǎo)入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/

文章來源地址http://www.zghlxwxcb.cn/news/detail-834643.html

到了這里，關(guān)于后端“fastapi”+前端“vue3+ts+ElementPlus”上傳文件到uploads目錄的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！