Uniapp使用UviewPlus在APP当中进行文件上传的解决方案

news/2024/10/30 7:38:47/

Uniapp使用UviewPlus在APP当中进行文件上传的解决方案

吐槽:真的可以不用就不要用uniapp,就像s一样,可以的话上Recat好很多,踩了很多坑。

原因

  1. 如果你是axios的忠实奴隶那么你会遇到第一个坑,就是uniapp下的原生编译不支持FormathData数据结构这就说明你就不能使用axios来进行文件流的传输,但是这并不代表你就不能用base64来进行逆天操作。
  2. 如果使用uniapp的原生的getFileSystemManager那么很好,走到第二的坑,uniapp的app端不支持这个的来调取系统api
  3. 如果你使用功能poi来的话,非常恭喜你走到第三个坑,那就是你根本看不懂你在写的是什么s

解决方法

  1. 直接自己封装好uniapp的原生的uploadFile来进行文件的上传
  2. 注意这个的上传的方式是表表单的形式,如果你使用的是SpringBoot来做后端的话那么就直接使用pram就可以进行数据的接受了
  3. 这个注意你如果进行内网转发或者其他的代理的话你就不要想你的请求头到里面的数据还活着,所以你就必须要在forData的数据域里面进行数据的传输,然后这个他给你的语法糖,这个主要的功能只是进行文件的上传,你的这个也可以直接被SpringBoot来进行处理的

实现过程

const uploadImagePlan = (imageList, event) => {console.log("图片上传", event)const fileUrl = event.file[0].url;const base64Prefix = "data:image/jpeg;base64,"; // 根据文件类型设置前缀console.log(fileUrl)plus.io.resolveLocalFileSystemURL(fileUrl, (entry) => {console.log('文件存在:', entry); // 输出条目信息}, (error) => {console.error('文件不存在或无法访问:', error); // 输出错误信息});const fileName = fileUrl.split('/').pop(); // 设置自定义的文件名const fileExtension = fileUrl.split('.').pop(); // 获取文件扩展名uni.uploadFile({url: server.serverUrl() + "/uploadImage", // 后端上传接口filePath: fileUrl,name: "file", // 设置文件名header: {'file-extension': fileExtension, // 发送扩展名到后端"fileName": fileName},formData: {// 其他需要传递的表单数据userId: '12345', // 示例字段,可以根据需求添加fileName: fileName},success: (res) => {console.log('上传成功', res);const data = JSON.parse(res.data)imageList.value.push({url: data.data.fileUrl})},fail: (err) => {console.error('上传失败', err);}});
}

后端略


http://www.ppmy.cn/news/1543040.html

相关文章

Rust 程序设计语言学习——高级特性

RUST 中常用部分学习结束之后,我们来接触一些 RUST 中的其他高级用法。 不安全 Rust:用于当需要舍弃 Rust 的某些保证并负责手动维持这些保证高级 trait:与 trait 相关的关联类型,默认类型参数,完全限定语法&#xff…

【C语言】预处理(预编译)详解(下)(C语言最终篇)

文章目录 一、#和##1.#运算符2.##运算符 二、预处理指令#undef三、条件编译1.单分支条件编译2.多分支条件编译3.判断符号是否被定义4.判断符号是否没有被定义 四、头文件的包含1.库头文件的包含2.本地头文件的包含3.嵌套包含头文件的解决方法使用条件编译指令使用预处理指令#pr…

分布式 ID 生成策略(二)

在上一篇文章,分布式 ID 生成策略(一),我们讨论了基于数据库的 ID 池策略,今天来看另一种实现,基于雪花算法的分布式 ID 生成策略。 如图所示,我们用 41 位时间戳 12 位机器 ID 10 位序列号&a…

使用 Kibana 将地理空间数据导入 Elasticsearch 以供 ES|QL 使用

作者:来自 Elastic Craig Taverner 如何使用 Kibana 和 csv 采集处理器将地理空间数据采集到 Elasticsearch 中,以便在 Elasticsearch 查询语言 (ES|QL) 中进行搜索。Elasticsearch 具有强大的地理空间搜索功能,现在 ES|QL 也具备这些功能&am…

Python 网络爬虫快速入门

网络爬虫是一种自动化的程序,用于从互联网上抓取数据。Python 由于其简洁的语法和丰富的库支持,成为编写网络爬虫的理想选择。本文将带你快速入门 Python 网络爬虫,从安装必要的库到编写一个简单的爬虫,再到处理更复杂的情况。 1…

【Spring框架】Spring框架的开发方式

目录 Spring框架开发方式前言具体案例导入依赖创建数据库表结构创建实体类编写持久层接口和实现类编写业务层接口和实现类配置文件的编写 IoC注解开发注解开发入门(半注解)IoC常用注解Spring纯注解方式开发 Spring整合JUnit测试 Spring框架开发方式 前言…

了解elasticsearch

目录 elasticsearch的作用 ELK技术栈 elasticsearch和lucene 为什么不是其他搜索技术? 总结 elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎,具备非常多强大功能,可以帮助我们从海量数据中快速找到需要的内容 例如&am…

STM32-Cube定时器TIM

一、内部时钟源 1、创建项目 File → New → STM32 project选择STM32F103C8T6单片机,命名TIM 2、配置单片机 1.打开USART1,方便我们与电脑连接查看数据 开启UART1并开启中断。 2、设置时钟源 开启外部高速晶振 将时钟频率设置为72MHz 设置调试模…