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>