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>
相关推荐
shawxlee8 小时前
vue3在public下封装config.js自定义配置动态数据,可在打包后直接修改,方便后端部署及后续维护
前端·javascript·经验分享·vue·团队开发·js·项目优化
用户059540174468 小时前
把记忆存储的回归测试从手工换成 Playwright + GitHub Actions,线上缺陷降低 80%
前端·css
触底反弹8 小时前
🚀 从 DOM0 级到 React 合成事件:前端事件监听的 20 年演进史
前端·react.js·面试
kyriewen8 小时前
我给前端项目的接口请求套了6层保护——才发现以前一直在裸奔
前端·javascript·面试
颜酱9 小时前
04 | 召回前置准备:搭好召回所需的四个数据库
前端·人工智能·后端
郝亚军10 小时前
如何安装webstorm、Node.js和vue CLI
前端·javascript·vue.js
IT_陈寒10 小时前
React的useEffect依赖项把我坑惨了
前端·人工智能·后端
东方小月11 小时前
从零开发一个Coding Agent:monorepo项目搭建
前端·后端·node.js
葬送的代码人生11 小时前
别再让 AI 瞎写代码了!Vibe Coding 三步法教你写出靠谱代码
前端·设计模式·架构
Shirley~~11 小时前
Code-Review-Graph:面向 AI 辅助代码审查的结构化上下文引擎
前端·ai编程