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

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来进行处理的

实现过程

vue 复制代码
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);
		}
	});
}

后端略

相关推荐
半开半落10 分钟前
uniapp微信小程序端接收ai模型返回的SSE流式数据
微信小程序·小程序·uni-app·ai模型
2501_9160074719 分钟前
在 CICD 中实践 Fastlane + Appuploader 命令行,构建可复制的 iOS 自动化发布流程
android·运维·ios·小程序·uni-app·自动化·iphone
qq_3168377535 分钟前
uniapp 缓存指定接口的响应,在无网络时使用缓存数据
前端·uni-app
奺儿39 分钟前
uniapp 小程序 报错 TypeError: Cannot convert undefined or null to object
小程序·uni-app
2501_915921431 小时前
从 HBuilder 到 App Store,uni-app 与 HBuilder 项目的 iOS 上架流程实战解析
android·ios·小程序·https·uni-app·iphone·webview
qq_316837751 小时前
uniapp 缓存请求文件时 判断是否有文件缓存 并下载和使用
前端·缓存·uni-app
随笔记2 小时前
uniapp开发app使用海康威视播放监控视频流如何使用以及遇到了什么问题
vue.js·uni-app·视频编码
游戏开发爱好者82 小时前
以 uni-app 为核心的 iOS 上架流程实践, 从构建到最终提交的完整路径
android·ios·小程序·https·uni-app·iphone·webview
游戏开发爱好者83 小时前
构建可落地的 iOS 性能测试体系,从场景拆解到多工具协同的工程化实践
android·ios·小程序·https·uni-app·iphone·webview
济南壹软网络科技有限公司3 小时前
基于 UniApp + PHP 的壹软V4Max旗舰盲盒商城系统技术实现方案
开发语言·uni-app·php·盲盒源码