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

文章目录

    • ⭐前言
      • 💖 小程序系列文章
    • ⭐uni-file-picker 组件
      • 💖 绑定事件
      • 💖 uploadFile api
      • 💖 自定义上传
    • ⭐后端fastapi定义上传接口
    • ⭐uniapp开启本地请求代理devServer
    • ⭐前后端联调
    • ⭐总结
    • ⭐结束

yma16-logo

⭐前言

大家好,我是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 组件

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

💖 绑定事件

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

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

💖 自定义上传

配置: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) => {// 请求成功之后将数据给Infoconsole.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 osapp = 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=nameif 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

json-set

⭐前后端联调

h5上传,formData的file为二进制文件
upload-img
200成功请求
200-res
后端python fastapi 文件上传成功再指定的media目录下
upload-success

⭐总结

关于uniapp上传需要注意两点

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

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

⭐结束

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

night-scene

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 感谢你的阅读!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/577801.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数据库原理及应用·关系数据库标准语言SQL

4.1 SQL概述 4.1.1 SQL的产生和发展 1.产生 1974年&#xff0c;SQL语言的雏形最早由美国IBM公司的Raymond F. Boyce和Donald D. Chamberlin提出 1975-1979年&#xff0c;在System R上首次实现&#xff0c;由IBM的San Jose研究室研制&#xff0c;称为SEQUEL 2.发展 1986年推…

猫头虎分享2023年12月17日博客之星候选--城市赛道博主文章数据

猫头虎分享2023年12月17日博客之星候选–城市赛道博主文章数据 博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开…

udp广播的例子

以下是一个使用C语言描述广播发送和接收的简单示例&#xff1a; 发送端&#xff08;广播发送&#xff09;&#xff1a; #include <stdio.h> #include <stdlib.h> #include <string.h> #include <sys/socket.h> #include <netinet/in.h> #inclu…

Linux gdisk创建GPT分区

gdisk命令工具默认将磁盘划分为GPT格式的分区&#xff1a; lsblk 查看分区 创建GPT格式的分区&#xff1a; 列出磁盘分区表&#xff1a; fdisk -l 有一个新的磁盘sdc 下面将sdc进行GPT分区 输入gdisk /dev/sdc 输入&#xff1f;查看帮助文档&#xff1a; 输入n 创建新的分…

Java@RequestParam注解和@RequestBody注解接收参数

目录 Java后端接收数据 第一章、后端不写任何注解情况下接收参数1.1&#xff09;后端不写注解postman发出get请求1.2&#xff09;后端不写注解postman发出post请求 第二章、后端写RequestParam注解接收参数2.1&#xff09;postman发出post请求2.2&#xff09;postman发出get请求…

MySQL 中的 INSERT 是怎么加锁的?

在之前的博客中&#xff0c;我写了一系列的文章&#xff0c;比较系统的学习了 MySQL 的事务、隔离级别、加锁流程以及死锁&#xff0c;我自认为对常见 SQL 语句的加锁原理已经掌握的足够了&#xff0c;但看到热心网友在评论中提出的一个问题&#xff0c;我还是彻底被问蒙了。他…

【Image】GAN的超详细解释(以及奇怪的问题)

GAN原理 工作流程 下面是生成对抗网络&#xff08;GAN&#xff09;的基本工作原理 在GAN的架构中&#xff0c;有两个关键的组件&#xff1a;生成器&#xff08;Generator&#xff09;和鉴别器&#xff08;Discriminator&#xff09;。 生成器&#xff08;Generator&#xff0…

HTML5之 夜景放烟花

参考网址 https://blog.csdn.net/Gou_Hailong/article/details/122269931 https://blog.csdn.net/u013343616/article/details/122233674 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi…

C/C++ BM2链表内指定区间反转

文章目录 前言题目1. 解决方案一1.1 思路阐述1.2 源码 2. 解决方案二2.1 思路阐述2.2 源码 总结 前言 这题是BM1的升级版&#xff0c;不过是把完整的链表翻转变成了指定区间。 题目 描述 将一个节点数为 size 链表 m 位置到 n 位置之间的区间反转&#xff0c;要求时间复杂度 …

手机蓝牙在物联网超市中的应用

超市一站式购物已进入城市的千家万户。然而人们在选购时却采用直接翻阅商品的方式&#xff0c;既不方便又不卫生甚至大大缩短食品类商品保质期&#xff0c;也给超市商品管理造成很大难度。物联网(The Internet of things)基于射频识别(RFID)、红外感应等技术&#xff0c;把物品…

CentOS环境下Nacos2.3集成PostgreSQL

title: CentOS环境下Nacos2.3集成PostgreSQL date: 2023-12-21 19:15:00 categories: Nacos description: CentOS环境下Nacos2.3集成PostgreSQL 1. 目录 1. 目录2. 简介3. 安装部署 3.1. 部署模式3.2. 环境准备3.3. 下载安装文件3.4. PostgreSQL插件 3.4.1. 下载地址3.4.2. 结…

VScode远程连接服务器,Pycharm专业版下载及远程连接(深度学习远程篇)

Visual Code、PyCharm专业版&#xff0c;本地和远程交互。 远程连接需要用到SSH协议的技术&#xff0c;常用的代码编辑器vscode 和 pycharm都有此类功能。社区版的pycharm是免费的&#xff0c;但是社区版不支持ssh连接服务器&#xff0c;只有专业版才可以&#xff0c;需要破解…

【论文阅读】MCANet: Medical Image Segmentation with Multi-Scale Cross-Axis Attention

文章目录 摘要创新点总结实现效果总结 摘要 链接&#xff1a;https://arxiv.org/abs/2312.08866 医学图像分割是医学图像处理和计算机视觉领域的关键挑战之一。由于病变区域或器官的大小和形状各异&#xff0c;有效地捕捉多尺度信息和建立像素间的长距离依赖性至关重要。本文提…

人工智能_机器学习073_SVM支持向量机_人脸识别模型建模_预测可视化_网格搜索交叉验证最优化参数对比---人工智能工作笔记0113

接着上一节来说,可以看到我们已经找到了合适的参数,然后 我们可以看一下这里 gc.best_params_ 就可以打印出最合适的参数 然后我们把最合适串按说填入到代码中,然后进行计算,看看得分 可以看到得分,训练数据是1.0 然后测试数据得分是0.7857...对吧

2024深入评测CleanMyMac X4.14.6破解版新的功能

随着时间的推移&#xff0c;我们的Mac电脑往往会变得越来越慢&#xff0c;存储空间变得越来越紧张&#xff0c;这时候一个优秀的清理工具就显得尤为重要。作为一款备受好评的Mac清理工具&#xff0c;它能够为你的Mac带来全方位的清理和优化。在本文中&#xff0c;我们将深入评测…

【HarmonyOS开发】OpenHarmony如何实现⼀次开发,多端部署

OpenHarmony提供用户程序框架、Ability框架以及UI框架&#xff0c;能够保证开发的应用在多终端运行时保证一致性。一次开发、多端部署。 多终端软件平台API具备一致性&#xff0c;确保用户程序的运行兼容性。 HarmonyOS提供了用户程序框架、Ability框架以及UI框架&#xff0c;…

WebRTC概念

定义 一个实时通信标准 通话原理 媒体协商 在WebRTC中&#xff0c;参与视频通讯的双方必须先交换SDP信息&#xff0c;获得一个都支持的编码格式 网络协商 目的&#xff1a;找到一条相互通讯的链路 做法&#xff1a;获取外网IP地址映射&#xff0c;通过信令服务器交换“网…

华锐三维云展平台 | VR在线展览云平台提供定制化虚拟展厅制作工具

随着科技的飞速发展&#xff0c;互联网技术的不断革新&#xff0c;广州华锐互动顺应时代需求&#xff0c;开发了VR在线展览云平台&#xff0c;用户可以在平台上自主创建属于自己的3D展厅。VR在线展览云平台正改变着传统展览行业的模式&#xff0c;为参展者提供更高效、更便捷、…

Hazel macOS自动化清理

Hazel是一款在Mac平台上的自动化文件管理工具&#xff0c;它可以帮助用户自动化处理文件&#xff0c;从而提高工作效率和减少重复性任务的时间和精力。以下是Hazel软件的功能特色&#xff1a; 强大的自动化处理功能&#xff1a;Hazel可以根据用户设定的规则&#xff0c;自动执…

Android---Kotlin 学习009

继承 在 java 里如果一个类没有被 final 关键字修饰&#xff0c;那么它都是可以被继承的。而在 kotlin 中&#xff0c;类默认都是封闭的&#xff0c;要让某个类开放继承&#xff0c;必须使用 open 关键字修饰它&#xff0c;否则会编译报错。此外在子类中&#xff0c;如果要复写…