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>
相关推荐
前端 贾公子2 小时前
第09章:上下文与记忆 (6)
开发语言·前端·python
用户931456355662 小时前
接口幂等性设计:从原理到落地,一篇讲透
前端
柚yuzumi2 小时前
别再猜 this:先看它属于谁,再看它指向谁
前端·javascript
YIAN2 小时前
React + Zustand + JWT 前端权限体系完整实现:从登录鉴权到路由守卫全流程拆解
前端·react.js·架构
汉堡大王95272 小时前
面试必考:手写代码 new 做了什么?从原理到实现全解析
前端·javascript·面试
BillKu3 小时前
TypeScript中,字符串字面量联合类型(Union Type)、enum的用法说明
前端·javascript·typescript
jayson.h3 小时前
PDF 合并+添加页码 相关库、类、函数
开发语言·前端·python
慧一居士4 小时前
Sass和Less功能、使用场景、用法对比
前端·css·less·sass
leoZ2314 小时前
AI+前端提效-09 AI赋能前端测试:单元测试、E2E测试自动生成,提升覆盖率
前端·人工智能·opencv·目标检测·数据挖掘·单元测试·语音识别
计算机魔术师4 小时前
OpenAI 评定 Astra 达到网络安全 Critical 能力阈值,将受限发布
前端