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>
相关推荐
jktantan15 小时前
Vue keep-alive 切标签后滚动位置回顶?因为 onDeactivated 里读到的 scrollTop 是 0
前端·javascript·vue.js
总要学点什么15 小时前
第89篇:三维特效-螺旋圆效果——让螺旋臂卷起一圈圈外扩的涟漪
开发语言·javascript·ecmascript·webgl·cesium·空间分析·1024程序员节
2601_9628857216 小时前
quotes 字段全解:涨跌幅、振幅、换手率的口径与单位
java·前端·spring
excel16 小时前
encodeURI 和 encodeURIComponent 有什么区别?
前端
前端精髓16 小时前
调用openrouter的免费API模型
java·前端·javascript
赛博守夜人17 小时前
AI安全攻防与治理之十四:AI 安全测试不能脱离传统安全,Web、API、移动端与模型攻击面的组合拳
前端·人工智能·安全
开开心心_Every17 小时前
快速隐藏程序工具自定义快捷键一键切换
java·开发语言·前端·spring·智能手机·word·intellij-idea
networknomad17 小时前
OpenReplay:自己搭的会话回放工具,给前端排错用的
前端·其他
缓慢更新18 小时前
AI 辅助生成单测:从接口定义到用例的流水线
java·服务器·前端·网络·数据库·人工智能
陈随易19 小时前
AI 运维服务器,安全又可靠的方法
前端·后端·程序员