uni-app 安卓10以上上传原图解决方案

Android 10及以上版本中,由于系统对文件访问的限制,使用chooseImage并勾选原图上传后,返回的是图片的外部存储路径,如:'file:///storage/emulated/0/DCIM/Camera/'。这种外部存储路径,无法直接转换成所需要的数据格式,如base64。

上传原图解决方案

为了适配Android 10及以上版本,需要将文件从外部存储路径拷贝到应用的私有目录(如_doc/),然后在应用内部进行操作。

1. 使用uni.chooseImageplus.gallery.pick选择图片
  •   这些API会返回一个临时路径,该路径是应用可以访问的。
2. 将文件拷贝到应用的私有目录
  • 使用plus.io.resolveLocalFileSystemURL解析应用的私有目录路径(如_doc/)。

  • 使用fileEntry.copyTo将文件从临时路径拷贝到目标路径。

代码示例:

export default {data() {return {tempFilePath: '', // 临时文件路径targetFilePath: '' // 目标文件路径};},methods: {async chooseImage() {// 调用uni.chooseImage选择图片uni.chooseImage({count: 1,sizeType: ['original', 'compressed'],sourceType: ['album', 'camera'],success: (res) => {this.tempFilePath = res.tempFilePaths[0];this.saveImageToDoc();},fail: (err) => {console.error('选择图片失败:', err);}});},saveImageToDoc() {const fileName = this.tempFilePath.split('/').pop();this.targetFilePath = `_doc/${fileName}`;// 确保目标目录存在plus.io.resolveLocalFileSystemURL('_doc/', (root) => {console.log('目标目录已存在');// 检查目标文件是否存在plus.io.resolveLocalFileSystemURL(this.targetFilePath, (fileEntry) => {fileEntry.remove(() => {console.log('文件已删除,可以重新复制');this.copyFile(root);}, (error) => {console.error('删除文件失败:', error.message);});}, (error) => {console.log('目标文件不存在,可以直接复制');this.copyFile(root);});}, (error) => {console.error('目标目录不存在,创建目录');plus.io.resolveLocalFileSystemURL('/', (fs) => {fs.getDirectory('doc', { create: true }, () => {console.log('目录创建成功');this.copyFile(fs.root);}, (error) => {console.error('目录创建失败:', error.message);});}, (error) => {console.error('无法访问根目录:', error.message);});});},copyFile(root) {plus.io.resolveLocalFileSystemURL(this.tempFilePath, (entry) => {entry.copyTo(root, fileName, (newEntry) => {console.log('文件复制成功:', newEntry.fullPath);//这里就拿到了图片的私有路径,可进行转换操作uni.showModal({title: '成功',content: '图片已保存到应用的_doc目录',showCancel: false});}, (error) => {console.error('复制文件失败:', error.message);});}, (error) => {console.error('解析文件路径失败:', error.message);});}}
};

注意:私有目录多了很多无用的图片,故需在使用完成后,立刻清理。

以上,就是一个简单的实现demo。

但是,如果选择了多个原图上传,可能会报错。因为在循环中调用copyFile时,可能会遇到以下问题:

  1. 异步操作的顺序问题:由于copyFile是异步操作,循环中的每次调用可能会同时进行,导致文件路径冲突或其他问题。

  2. 文件删除操作的时机问题:你在copyFile中尝试在所有文件处理完成后删除原文件,但由于异步操作的不确定性,可能会导致删除操作提前执行,影响后续操作。

循环上传解决方案

为了解决这些问题,可以使用以下方法:

  1. 使用Promiseasync/await:确保每次文件操作完成后再进行下一次操作。

  2. 在所有文件处理完成后统一删除:避免在每次复制后立即删除文件,而是等到所有文件处理完成后统一删除。

代码实例:

async handleChooseImage(sourceType) {if (sourceType === 'camera') {this.handleStartGyro();}try {if (sourceType === 'album') {// 从相册中选择图片console.log("从相册中选择多张图片:");await new Promise((resolve, reject) => {plus.gallery.pick(async (e) => {if (e.files.length === 0) {console.log("取消选择图片");resolve();return;}uni.showToast({title: "上传中",icon: "loading"});for (const [index, data] of e.files.entries()) {await this.saveImageToDoc(data, index, e.files.length);}uni.hideLoading();uni.showToast({title: "上传完成",icon: "success"});resolve();}, (e) => {console.log("取消选择图片");resolve();}, {filter: "image",multiple: true});});} else {// 从相机中选择图片const res = await uni.chooseImage({count: 9,sizeType: ["original"],sourceType: [sourceType]});const imagePaths = res.tempFilePaths;let gyroData = '';if (sourceType === 'camera') {gyroData = this.gyroValueRaw.join(',');}this.gyroModule && this.gyroModule.stopCustomSensor();if (this.gyroUpdateTimer) clearInterval(this.gyroUpdateTimer);uni.showToast({title: "上传中",icon: "loading"});for (const [index, path] of imagePaths.entries()) {await this.handleUploadNew(path, index, imagePaths.length, gyroData);}uni.hideLoading();uni.showToast({title: "上传完成",icon: "success"});uni.removeStorageSync("workData");setTimeout(() => {uni.redirectTo({url: "/pages/work/work"});}, 1000);}} catch (error) {console.error("选择照片失败:", error);uni.showToast({title: "选择照片失败",icon: "none"});}
},async saveImageToDoc(tempFilePath, index, total) {const fileName = tempFilePath.split('/').pop();this.targetFilePath = `_doc/${fileName}`;// 确保目标目录存在const root = await this.ensureDirectoryExists('_doc/');// 检查目标文件是否存在let fileEntry;try {fileEntry = await this.resolveFileEntry(this.targetFilePath);await fileEntry.remove();console.log('文件已删除,可以重新复制');} catch (error) {console.log('目标文件不存在,可以直接复制');}// 复制文件const newEntry = await this.copyFile(root, tempFilePath, fileName);console.log('文件复制成功:', newEntry.fullPath);// 上传文件await this.handleUploadNew(newEntry.fullPath, index, total);if (index === total - 1) {uni.hideLoading();uni.showToast({title: "所有图片已上传",icon: "success"});}
},ensureDirectoryExists(dirPath) {return new Promise((resolve, reject) => {plus.io.resolveLocalFileSystemURL(dirPath, (root) => {resolve(root);}, (error) => {console.error('目标目录不存在,创建目录');plus.io.resolveLocalFileSystemURL('/', (fs) => {fs.getDirectory(dirPath, { create: true }, (root) => {resolve(root);}, (error) => {console.error('目录创建失败:', error.message);reject(error);});}, (error) => {console.error('无法访问根目录:', error.message);reject(error);});});});
},resolveFileEntry(filePath) {return new Promise((resolve, reject) => {plus.io.resolveLocalFileSystemURL(filePath, (fileEntry) => {resolve(fileEntry);}, (error) => {reject(error);});});
},copyFile(root, tempFilePath, fileName) {return new Promise((resolve, reject) => {plus.io.resolveLocalFileSystemURL(tempFilePath, (entry) => {entry.copyTo(root, fileName, (newEntry) => {resolve(newEntry);}, (error) => {console.error('复制文件失败:', error);reject(error);});}, (error) => {console.error('解析文件路径失败:', error);reject(error);});});
},

优化点说明

  1. 使用async/await

    • plus.gallery.pick的回调改为async函数,并在循环中使用await来同步处理每个文件。

    • 确保每次文件处理完成后才进行下一次操作。

  2. 统一处理逻辑

    • saveImageToDoc方法改为异步方法,确保文件复制和上传操作是同步进行的。

  3. 错误处理

    • 使用try-catch捕获异步操作中的错误,并提供详细的错误提示。

  4. 用户体验

    • 在操作过程中显示加载提示。

    • 在操作完成后提供明确的反馈信息。

通过这些优化,代码将更加健壮、易读,并且可以避免并发问题。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/77458.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

迭代器模式:统一不同数据结构的遍历方式

迭代器模式:统一不同数据结构的遍历方式 一、模式核心:分离数据遍历与数据表示 在开发中,我们经常需要遍历不同的数据结构,如数组、链表、树等。若在客户端代码中直接编写遍历逻辑,不仅会导致代码冗余,而…

Oracle 如何停止正在运行的 Job

Oracle 如何停止正在运行的 Job 先了解是dbms_job 还是 dbms_scheduler,再确定操作命令。 一 使用 DBMS_JOB 包停止作业(适用于旧版 Job) 1.1 查看正在运行的 Job SELECT job, what, this_date, this_sec, failures, broken FROM user_j…

真实波幅策略思路

该策略是一种基于ATR(Average True Range)指标的交易策略,主要用于期货市场中的日内交易。策略的核心思想是利用ATR指标来识别市场的波动范围,并结合均线过滤来确定买入和卖出的时机。 交易逻辑思维 1. 数据准备与初始化 - 集合竞…

Web3技术如何提升用户数据保护

在这个信息爆炸的时代,用户数据保护已成为全球关注的焦点。Web3 技术,作为下一代互联网的代表,以其去中心化、安全性和用户主权等特点,为用户数据保护提供了新的解决方案。本文将探讨 Web3 技术如何提升用户数据保护。 去中心化存…

银河麒麟系统 达梦8 安装 dlask 框架后端环境

适配的一套环境为 dmPython2.5.8 dmSQLAlchemy1.4.39 Flask2.0.3 Flask-Cors3.0.10 Flask-SQLAlchemy2.5.1 SQLAlchemy1.4.54 Werkzeug2.2.2其中 # sqlalchemy-dm1.4.39 通过dmdbms目录内文件进行源码安装 (MindSpore) [ma-user python]$pwd /home/syl/dmdbms/drivers/python…

利用 i2c 快速从 Interface 生成 Class

利用 i2c 快速从 Interface 生成 Class(支持 TS & ArkTS) 在日常 TypeScript 或 ArkTS 开发中,需要根据 interface 定义手动实现对应的 class,这既重复又容易出错。分享一个命令行工具 —— interface2class,简称…

015-C语言字符函数和字符串函数

C语言字符函数和字符串函数 文章目录 C语言字符函数和字符串函数1. 字符分类函数2. 字符转换函数3. strlen4. strcpy5. strcat6. strcmp7. strncpy8. strncat9. strncmp10. strstr11. strtok12. strerror 1. 字符分类函数 C语言中有一系列函数是专门做字符分类的,也…

CGAL边折叠edge_collapse的问题

使用edge_collapse对一个模型简化,之后回收垃圾,collect_garbage 处理之前的顶点和三角形数量: number_of_vertices: 955730 number_of_faces: 1903410 num_vertices: 955730 num_faces: 1903410 处理之后的顶点和三角形数量:…

用c语言实现——顺序队列支持用户输入交互、入队、出队、查找、遍历、计算队列长度等功能。确定判断判满的方法为:牺牲一个存储单元方式

一、知识介绍 1.基本原理 在顺序队列中,我们使用一个固定大小的数组来存储队列中的元素,并使用两个指针(front 和 rear)来分别表示队头和队尾的位置。 队列为空的条件:front rear 队列满的条件:rear 1…

JVM 系列:JVM 内存结构深度解析

你点赞了吗?你关注了吗?每天分享干货好文。 高并发解决方案与架构设计。 海量数据存储和性能优化。 通用框架/组件设计与封装。 如何设计合适的技术架构? 如何成功转型架构设计与技术管理? 在竞争激烈的大环境下&#xff0c…

手机上的APN是什么,该怎么设置

网上说改个APN就可以让网速快几倍,那到底APN是个什么东西,真的能让网速快几倍吗? APN的作用 网络连接基础:APN(接入点名称)是手机连接移动网络的“桥梁”,负责识别运营商网络类型(…

微服务治理与可观测性

服务注册与发现 核心功能 服务实例动态变化:实例可能因扩缩容、故障或迁移导致IP变动。服务依赖解耦:调用方无需硬编码服务地址,降低耦合度。负载均衡:自动选择健康实例,提升系统可用性。 核心组件 服务注册中心&am…

嵌入式linux系统中内存管理的方法与实现

第一:linux内核管理详解图形 第二:Linux内存管理详细分析 深入剖析Linux内核内存管理 作为嵌入式系统开发者,理解Linux内核的内存管理对于开发高效、稳定的系统至关重要。在这篇文章中,我们将详细解析Linux内核如何划分物理内存和虚拟内存,页表、MMU(内存管理单元)与TL…

【dataframe显示不全问题】打开一个行列超多的excel转成df之后行列显示不全

出现问题如下图: 解决方案~ display.width解决列显示不全 pd.set_option(display.max_columns,1000) pd.set_option(display.width, 1000) pd.set_option(display.max_colwidth,1000) pd.set_option(display.max_rows,1000)

Linux——Shell编程之正则表达式与文本处理器(笔记)

目录 基础正则表达式 1:基础正则表达式示例 (4)查找任意一个字符“.”与重新字符“*” (5)查找连续字符范围“{ }” 文本处理器 一、sed工具 二、awk工具 (1)按行输出文本 (2&#xff0…

OpenHarmony系统-源码下载,环境搭建,编译,烧录,调试

获取源码 以OpenHarmony5.0.3为例 repo init -u https://gitee.com/openharmony/manifest -b OpenHarmony-5.0.3-Release --no-repo-verify repo sync -c repo forall -c git lfs pull搭建环境 安装必要的工具和命令 apt-get install -y apt-utils binutils bison flex bc …

Vue3 本地打包启动白屏解决思路!! !

“为什么我访问 http://127.0.0.1:5501/index.html 白屏,删了 index.html 再访问 / 就又活过来了?” —— 你的项目与 SPA 路由的“宫斗大戏” 一、问题复现 场景 本地通过 VSCode Live Server(或其他静态服务器)启动了打包后的 V…

数字人(2):数字人技术全景透视(2025演进版)

随着人工智能技术的迅猛发展,数字人技术发展也是一日千里。站在当下,着眼未来,我们一起在回眸透视过去的基础上,一起共同眺望数字人技术的未来。 一、数字人技术体系重构 我们可以用三维定义对数字人技术进行框架重构 维度 技术内涵 典型特征 物理层 人体数字化建模技术 …

小刚说C语言刷题——1035 判断成绩等级

1.题目描述 输入某学生成绩,如果 86分以上(包括 86分)则输出 VERY GOOD ,如果在 60到 85之间的则输出 GOOD (包括 60和 85),小于 60 的则输出 BAD。 输入 输入只有一行,包括 1个整数。 输出 输出只有一行&#xf…

React-在使用map循环数组渲染列表时须指定唯一且稳定值的key

在渲染列表的时候,我们须给组件或者元素分配一个唯一值的key, key是一个特殊的属性,不会最终加在元素上面,也无法通过props.key来获取,仅在react内部使用。react中的key本质是服务于diff算法, 它的默认值是null, 在diff算法过程中…