uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)

interface CallbackType={
  "progress"      : Number,     // 上传进度 ，仅 @progress 事件包含此字段
  "index"       : Number,     // 上传文件索引 ，仅 @progress 事件包含此字段
  "tempFile"      : file,     // 当前文件对象 ，包含文件流，文件大小，文件名称等，仅 @progress 事件包含此字段
  "tempFiles"     : files,    // 文件列表,包含文件流，文件大小，文件名称等
  "tempFilePaths"   : filePaths,  // 文件地址列表，@sucess 事件为上传后的线上文件地址
}

<template>
  <view class='container'>
    <view class='upload-box'>
      <view class="upload">
        <uni-card title="文件上传" extra="">
          <uni-file-picker title="选择图片" v-model:value="state.imageValue" fileMediatype="image" mode="grid"
            @select="select" @progress="progress" @success="success" @fail="fail" :auto-upload="false" />
          <button type="primary" class="btn" @click="startUpload">
            开始上传
          </button>
        </uni-card>
      </view>
    </view>
  </view>
</template>
<script setup>
  import {
    reactive
  } from 'vue';
  const state = reactive({
    imageValue: '',
    title: '上传',
    fileList: []
  })
  const select = (file) => {
    console.log('select', file)
    state.fileList = [file]
  }
  const progress = (file) => {
    console.log('progress', file)
  }
  const success = (file) => {
    console.log('success', file)
  }
  const fail = (file) => {
    console.log('fail', file)
  }
  const startUpload = () => {
    console.log('start upload', state.fileList)
    console.log('state.fileList[0]', state.fileList[0])
    console.log('state.fileList[0].tempFiles', state.fileList[0].tempFiles)
    uni.uploadFile({
      url: '/api/uploadFile/action',
      // 路径
      filePath: state.fileList[0].tempFilePaths[0],
      // 后端取的file字段
      name: 'file',
      //请求成功后返回
      success: (res) => {
        // 请求成功之后将数据给Info
        console.log('res', res)
        if (res.statusCode === 200) {
          console.log('success')
        }
      },
      fail: (e) => {
        console.log('error', e)
      }
    });
  }
</script>
<style lang="scss">
  .container {
    text-align: center;
  }
  .upload-box {
    width: 100%;
    .upload {
      padding: 50px 20px 0 20px;
      .uni-card {
        background: rgba(255, 255, 255, .6);
        .file-picker__box-content {
          border-color: rgb(0, 122, 255) !important;
        }
      }
      .uni-file-picker__header {
        background: rgb(251, 213, 215);
        color: #fff;
      }
    }
  }
</style>

from fastapi import FastAPI, status, File, Form, UploadFile
from fastapi.middleware.cors import CORSMiddleware
import os
app = FastAPI()
# 跨域配置
origins = [
    "http://localhost:3000",
]
app.add_middleware(
    CORSMiddleware,
    allow_origins=origins,
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)
@app.get("/api")
async def root():
    return {"data": "fast api!"}
startTime=datetime.now()
# 上传文件
@app.post("/api/uploadFile/action")
async def uploadSingleFile(
    file:UploadFile
):
    writeBytes('./media',file.filename,file)
    return {
        'code':200,
        "msg":'success',
        'filepath_2':'success'
    }
# 上传目录文件
@app.post("/api/uploadDirFile/action")
async def uploadDirFile(
    file:UploadFile,
    dir:str=Form(),
    name:str=Form()
):
    print(dir,'dir_____________')
    writeBytes('./media/'+dir,name,file)
    return {
        'code':200,
        "msg":'success'
    }
# 将二进制数据写入目录文件
def writeBytes(dirs,name,file):
    bytesFile=file.file.read()
    filename=name
    if not os.path.exists(dirs):
        os.makedirs(dirs)
    with open(dirs+'/'+ filename, "wb") as f:
        f.write(bytesFile)

$ uvicorn server.main:app --reload --port 3333

{
  "h5": {
    "devServer": {
      "port": 8787,
      "disableHostCheck" : true,
      "proxy": {
        "/api": {
          "target": "http://localhost:3333",
          "changeOrigin": true,  
          "pathRewrite": {
            "^/api": ""
          }
        }
      }
    }
  },
}