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

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

⭐前言

大家好,我是yma16,本文分享关于 uniapp框架——初始化vue3项目(搭建ai项目第一步)。

vue3系列相关文章:

vue3 + fastapi 实现选择目录所有文件自定义上传到服务器

前端vue2、vue3去掉url路由“ # ”号——nginx配置

csdn新星计划vue3+ts+antd赛道——利用inscode搭建vue3(ts)+antd前端模板

认识vite_vue3 初始化项目到打包

python_selenuim获取csdn新星赛道选手所在城市用echarts地图显示

让大模型分析csdn文章质量 —— 提取csdn博客评论在文心一言分析评论区内容

前端vue3——html2canvas给网站截图生成宣传海报

拖拽相关文章

前端——html拖拽原理

前端vue3——实现二次元人物拼图校验

💖 小程序系列文章

小程序组件传值

小程序自定义微信昵称和头像

小程序制作markdown博客

小程序结合chatgpt制作聊天页面

小程序复制到粘贴板的功能实现

小程序的markdown代码块复制功能

小程序图片二维码识别

小程序获取openid联动django实现

微信小程序_搜索图片功能实现

uniapp系列文章

uniapp框架——初始化vue3项目(搭建ai项目第一步)

multipart/form-data 原理

multipart/form-data 是一种编码方式,用于在 HTTP 请求中传输包含文件或二进制数据的表单数据。它与常见的

application/x-www-form-urlencoded 编码方式不同,后者只能传输纯文本数据。

multipart/form-data

编码方式的原理是将表单数据分割成多个部分,每个部分都包含一个头部和一个数据体。每个部分的头部包含了该部分的数据类型和其他元数据,数据体则包含了实际的数据内容。

具体的传输过程如下:

  1. 将表单数据分割成多个部分,每个部分都有唯一的边界标识。
  2. 每个部分都以 “–” 加上边界标识开头,并以一个空行结束。
  3. 在每个部分的头部,指定该部分的数据类型和其他元数据,如 Content-Disposition 和 Content-Type。
  4. 在每个部分的数据体中,包含实际的数据内容。
  5. 所有部分的数据体之间使用边界标识分隔。

在接收端,服务器会解析 HTTP

请求,根据边界标识将数据分割成多个部分。然后,服务器可以根据每个部分的数据类型和其他元数据来处理数据,对文件进行保存或进行其他处理。

使用 multipart/form-data

编码方式可以方便地上传文件或传输二进制数据,而不仅限于纯文本数据。这使得它在文件上传和表单提交等场景中广泛使用。

⭐uni-file-picker 组件

文件选择上传组件,可以选择图片、视频等任意文件并上传到当前绑定的服务空间

💖 绑定事件

event description
@select 选择文件后触发
@progress 文件上传时触发
@success 上传成功触发
@fail 上传失败触发
@delete 文件从列表移除时触发

Callback Params

回调参数

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

💖 uploadFile api

参数名 类型 必填 说明
url String 开发者服务器 url
files Array 是(files和filePath选其一) 需要上传的文件列表。使用 files 时,filePath 和 name 不生效。 App、H5( 2.6.15+)
fileType String 见平台差异说明 文件类型,image/video/audio 仅支付宝小程序,且必填。
file File 要上传的文件对象。 仅H5(2.6.15+)支持
filePath String (files和filePath选其一) 要上传文件资源的路径。
name String 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
header Object 否 HTTP 请求 Header, header 中不能设置 Referer。
timeout Number 超时时间,单位 ms H5(HBuilderX 2.9.9+)、APP(HBuilderX 2.9.9+)、微信小程序、支付宝小程序、抖音小程序、快手小程序
formData Object HTTP 请求中其他额外的 form data
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

💖 自定义上传

配置:auto-upload="false"

1.前端需要件选择文件临时存储

2.点击上传时使用

选择文件上传

<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>

⭐后端fastapi定义上传接口

fast上传文件定义

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指定3333端口运行后端

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

⭐uniapp开启本地请求代理devServer

h5模式代理

manifest.json

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

配置源码视图的h5

⭐前后端联调

h5上传,formData的file为二进制文件

200成功请求

后端python fastapi 文件上传成功再指定的media目录下

⭐总结

关于uniapp上传需要注意两点

  • 使用文件路径时是否传递正确
  • 后端接受的数据类型是否时formData

假如后端需要上传blob类型格式需要自定义请求参数类型

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!


目录
相关文章
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的销售项目流程化管理系统附带文章源码部署视频讲解等
26 3
|
11天前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp小程序的项目申报管理系统附带文章源码部署视频讲解等
22 3
|
3天前
|
前端开发
[巨详细]使用HBuilder-X新建uniapp项目教程
【6月更文挑战第6天】安装HBuilder-X 详细步骤可看上文》》 启动uniapp项目 先打开HBuilder-X
12 5
|
7天前
|
数据采集 人工智能 监控
Spring Boot项目中集成Spring AI(也就是Spring Artificial Intelligence)
Spring Boot项目中集成Spring AI(也就是Spring Artificial Intelligence)
33 1
|
10天前
|
人工智能 关系型数据库 Docker
【Django项目】 通过AI实现视频转文字
【Django项目】 通过AI实现视频转文字
|
3天前
|
人工智能 开发框架 搜索推荐
探索移动应用开发的未来:跨平台框架与AI的融合
在本文中,我们将深入探讨移动应用开发领域的最新趋势,着重于跨平台开发框架的兴起和人工智能技术的融合。我们将分析这些技术如何改变开发者构建应用程序的方式,以及它们对最终用户体验的影响。通过实际案例研究,我们将展示这些趋势如何在现实中得以应用,并讨论它们对未来移动应用生态系统的潜在影响。
14 0
|
4天前
|
JavaScript
基于Vue3的Uniapp实训项目|一家鲜花店
基于Vue3的Uniapp实训项目|一家鲜花店
15 0
|
5天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的移动网赚项目的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的移动网赚项目的详细设计和实现(源码+lw+部署文档+讲解等)
|
6天前
|
前端开发 开发工具 git
[巨详细]使用HBuilder-X启动uniapp项目教程
【6月更文挑战第6天】使用HBuilder-X启动uniapp项目教程 先用HBuilder-X打开本地的uniapp项目
35 0
|
9天前
|
数据采集 存储 人工智能
利用AI技术改善数字化转型项目的九种方法
利用AI技术改善数字化转型项目的九种方法