uniapp上传文件报错:targetSdkVersion设置>=29后在Android10+系统设备不支持当前路径。请更改为应用运行路径!

1.问题描述

最近做uniapp上传本地图片功能,需要通过pathToBase64 转成Base64位传给后端,结果报错:

targetSdkVersion设置>=29后在Android10+系统设备不支持当前路径。请更改为应用运行路径!具体请看:https://ask.dcloud.net.cn/article/36199

具体原因是因为Android 10+沙盒机制的限制,所以需要对上传文件做一层处理

2.解决方案

注:没有安装image-tools的话先安装 : npm i image-tools

javascript 复制代码
import { pathToBase64 } from 'image-tools';
 //这是我自己的接口,你换成自己的就可以了
import { uploadFileApi } from '@/api/upload';
export default function pickAndUploadImage() {
	return new Promise((resolve, reject) => {
		uni.chooseImage({
			sizeType: 'compressed',
			success: (res) => {
				const selectedPath = res.tempFilePaths[0];
				console.log('选择的图片路径:', selectedPath);
				plus.io.resolveLocalFileSystemURL(selectedPath, (entry) => {
					const fileName = Date.now() + '_' + entry.name;
					// 获取沙盒根目录
					plus.io.resolveLocalFileSystemURL('_doc/', async (root) => {
						try {
							let safePath = selectedPath;

							// 如果路径不在沙盒,需要拷贝
							if (!(selectedPath.includes('_doc') || selectedPath.includes('_downloads') || selectedPath.includes('_documents'))) {
								console.log('路径不在沙盒,拷贝中...');
								const newFile = await new Promise((resCopy, rejCopy) => {
									entry.copyTo(root, fileName, resCopy, rejCopy);
								});
								safePath = newFile.toLocalURL();
								console.log('已拷贝到沙盒:', safePath);
							} else {
								console.log('路径已在沙盒,无需拷贝');
							}

							// 转 base64
							uni.showLoading({title:'上传中'})
							const pathBase64 = await pathToBase64(safePath);

							// 这里写你自己的接口,pathBase64 是拿到的base64数据
							const imageResponse = await uploadFileApi({ img: pathBase64 });
	                        uni.hideLoading();
                            uni.showToast({title:"上传成功",icon:"none"})
							resolve(imageResponse.url);

						} catch (err) {
							uni.hideLoading();
                            uni.showToast({title:"上传失败",icon:"none"})
							reject(err);
						}
					}, (err) => {
						reject(err);
					});

				}, (err) => {
					reject(err);
				});
			},
			fail: (err) => {
				reject(err);
			}
		});
	});
}

3.方法使用

页面调用

vue2 , vue3都可使用

javascript 复制代码
<script setup lang="ts">
	// 上传图片
	const onUploadAvatarImg = async () => {
		const file = await uploadFile();
		parmas.img = file;
	}
	
</script>
相关推荐
高级程序源10 小时前
django校园寻物通失物招领平台32261-计算机课程设计、毕业设计
vue.js·python·mysql·小程序·django·flask·课程设计
WeiXin_DZbishe11 小时前
基于springboot宠物领养系统-计算机毕设 附源码【课程设计】94217
vue.js·spring boot·python·django·php·课程设计
架构技术专栏11 小时前
Agent 工具调用:从工具声明到执行反馈
前端·人工智能·后端
别动我齐刘海12 小时前
C++ 工程化学习
java·linux·前端·c++·学习·机器学习·机器人
志尊宝12 小时前
Vue3 零基础每日笔记(071):暗黑模式与主题切换——CSS 变量 + Element Plus 暗黑方案
前端·css·笔记·vue·html·前端开发·软件开发
WeiXin_DZbishe13 小时前
基于springboot城市公交实时运营与调度系统-计算机毕设 附源码【课程设计】66173
java·vue.js·spring boot·后端·python·php·课程设计
刘发财13 小时前
前端如何生成10000页PDF文件?
前端·javascript·开源
WeiXin_DZbishe13 小时前
基于Springboot+AI的kuall音乐广场的设计与实现-计算机毕设 附源码【课程设计】12715
vue.js·人工智能·spring boot·后端·python·php·课程设计
A接拉起00713 小时前
2026 年 JavaScript 开发者需要了解的知识
前端·javascript·后端
_馒头13 小时前
pixiJs游戏开发实践 - 跳棋小游戏
javascript·vue.js