当前位置: 首页 > news >正文

uniapp项目实践总结(十三)封装文件操作方法

导语:在日常 APP 开发过程中,经常要进行文件的保存、读取列表以及查看和删除文件等操作,接下来就看一下具体的方法。

目录

  • 原理分析
  • 方法实现
  • 实战演练
  • 案例展示

原理分析

主要是以下 API。

  • uni.saveFile:保存文件到本地缓存列表;
  • uni.getSavedFileList:获取保存文件列表;
  • uni.getSavedFileInfo:获取文件详细信息;
  • uni.removeSavedFile:移除保存的文件;
  • uni.openDocument:打开文档;

以下方法存于根目录下的scripts文件夹下的http.js文件中。

方法实现

接下来一一说明如何实现数据请求、文件下载以及文件的上传的方法封装。

保存文件

保存文件这里使用条件编译,分别对 h5、微信小程序、APP 进行了对应方法的封装。

  • 总体方法

这里主要是进行参数的处理,包括默认参数,传入参数,合并参数。

// 保存图片
async function saveFile(options) {let isHttp = options.url.indexOf("http") > -1;let url = isHttp ? options.url : `${urls.baseUrl}${options.url}`;let defultOptions = {url,name: options.name || utils.uuid(),extName: options.extName || utils.fileExt(url),filePath: options.filePath,};let params = { ...options, ...defultOptions };console.log("保存文件参数:", params);// h5代码// 微信小程序代码// APP 代码
}
  • h5 保存文件

这个主要是使用fetchAPI 进行文件下载,然后使用a标签进行点击下载。

// #ifdef H5
fetch(url, {mode: "cors",
}).then(async (res) => {const e = await res.blob();return e;}).then((blob) => {const fileElem = document.createElement("a");let fileUrl = URL.createObjectURL(blob);fileElem.style.display = "none";fileElem.href = fileUrl;fileElem.download = `${params.name}.${params.extName}`;document.body.appendChild(fileElem);fileElem.click();setTimeout(() => {URL.revokeObjectURL(fileUrl);fileElem.remove();}, 1000);});
// #endif
  • 微信小程序保存文件

这个主要是使用微信小程序的wx.getFileSystemManagerAPI 来获取文件管理器接口,然后进行下载保存文件。

// #ifdef MP-WEIXIN
const fs = wx.getFileSystemManager(),userDataPath = wx.env.USER_DATA_PATH;
const filePath = params.filePath || `${userDataPath}/${params.name}.${params.extName}`;
wx.showLoading({title: "文件下载中...",
});
wx.downloadFile({url,success(res) {let tempFile = res.tempFilePath;let img = ["png", "jpg", "gif"];if (tempFile && img.includes(params.extName)) {wx.saveImageToPhotosAlbum({filePath: tempFile,success: function () {wx.showToast({title: "保存成功!",icon: "success",});},fail() {wx.showToast({title: "保存失败!",icon: "error",});},});} else {fs.saveFile({tempFilePath: tempFile,filePath,success: function () {wx.showToast({title: "保存成功!",icon: "success",});},fail() {wx.showToast({title: "保存失败!",icon: "error",});},});}},fail() {wx.showToast({title: "下载失败!",icon: "error",});},complete() {wx.hideLoading();},
});
// #endif
  • APP 保存文件

这里主要是使用uni.saveFile方法保存文件。

// #ifdef APP-PLUS
uni.showLoading({title: "文件下载中...",
});
let opts = {url,
};
let data = await download(opts);
if (data) {uni.saveFile({tempFilePath: data,success: function (res) {uni.showToast({title: "保存成功!",icon: "success",});},fail() {uni.showToast({title: "保存失败!",icon: "error",});},complete() {uni.hideLoading();},});
} else {uni.showToast({title: "下载失败!",icon: "error",});
}
// #endif

获取文件管理

下面的 getIfs 是封装的一个方法,用于获取特定终端下面的文件管理方法。

// utils.js
// 文件操作
function getIfs() {let ifs = {list: null,info: null,delete: null,open: null,};// #ifdef MP-WEIXINlet fsm = wx.getFileSystemManager();ifs.list = fsm.getSavedFileList;ifs.info = fsm.getFileInfo;ifs.delete = fsm.unlink;ifs.open = fsm.open;// #endif// #ifdef APP-PLUSifs.list = uni.getSavedFileList;ifs.info = uni.getSavedFileInfo;ifs.delete = uni.removeSavedFile;ifs.open = uni.openDocument;// #endifreturn ifs;
}

文件列表

这个支持传入文件路径,获取特定文件信息。

// 保存文件列表
async function fileList(filePath) {try {let ifs = utils.getIfs(),list = [];let data = await ifs.list();if (data.fileList) {list = data.fileList;if (list.length) {for (let item of list) {item.name = utils.fileName(item.filePath);item.id = utils.uuid();item.sizeText = utils.fileSize(item.size);item.timeText = utils.nowDate(item.createTime).normal;}}if (filePath) {list = list.filter((s) => filePath === s.filePath);}return {code: 1,data: list,};} else {return {code: 2,data: data.errMsg,};}} catch (e) {//TODO handle the exceptionreturn {code: 2,data: e,};}
}

查看文件

// 打开文件
async function openFile(filePath = "", showMenu = true) {try {if (!filePath) {return {code: 2,data: "文件路径不能为空!",};}let ifs = utils.getIfs();let result = await ifs.open({filePath,showMenu,});if (result) {return {code: 1,data: "打开成功!",};} else {return {code: 2,data: "打开失败!",};}} catch (e) {//TODO handle the exceptionreturn {code: 2,data: e,};}
}

删除文件

// 删除文件
async function deleteFile(filePath) {try {if (!filePath) {return {code: 2,data: "文件路径不能为空!",};}let ifs = utils.getIfs();let result = await ifs.delete({filePath,});if (result) {return {code: 1,data: "删除成功!",};} else {return {code: 2,data: "删除失败!",};}} catch (e) {//TODO handle the exceptionreturn {code: 2,data: e,};}
}

写好以后记得导出方法。

实战演练

模板内容

  • 保存文件
<button type="primary" size="mini" @click="saveFile('file')" v-if="httpInfo.uploadFileUrl">保存文件
</button>
  • 文件列表
<!-- #ifdef APP-PLUS -->
<view class="list-http"><button @click="getFileList">文件列表</button><text class="list-http-txt">响应内容:</text><view class="list-file" v-for="(item, index) in httpInfo.fileList" :key="item.id"><view class="list-file-item">文件名称:{{ item.name }}</view><view class="list-file-item">文件大小:{{ item.sizeText }}</view><view class="list-file-item">文件路径:{{ item.filePath }}</view><view class="list-file-item">保存时间:{{ item.timeText }}</view><view class="list-file-item"><button size="mini" type="primary" @click="openFile(item)">查看文件</button><button size="mini" type="warn" @click="delFile(item, index)">删除文件</button></view></view>
</view>
<!-- #endif -->

脚本方法

  • 定义数据
let httpInfo = reactive({fileList: [],
});
  • 保存文件
// 保存文件
function saveFile(type = "img") {let url = httpInfo[type == "img" ? "uploadImgUrl" : "uploadFileUrl"];if (url) {console.log("要保存的文件:", url);proxy.$http.saveFile({url,name: httpInfo.fileName,});}
}
  • 文件列表
// #ifdef APP-PLUS
// 获取文件列表
async function getFileList() {let filePath = "_doc/uniapp_save/16928451309592.srt";let data = await proxy.$http.fileList();if (data.code == 1) {httpInfo.fileList = data.data;}
}
// #endif
  • 查看文件
// #ifdef APP-PLUS
// 查看文件
async function openFile(item) {let data = await proxy.$http.openFile(item.filePath);console.log("查看文件结果:", data);
}// #endif
  • 删除文件
// #ifdef APP-PLUS
// 删除文件
async function delFile(item, index) {let data = await proxy.$http.deleteFile(item.filePath);if (data.code === 1) {httpInfo.fileList.splice(index, 1);uni.showToast({title: data.data,icon: "success",});} else {uni.showToast({title: data.data,icon: "error",});}
}
// #endif

案例展示

  • 保存文件
    在这里插入图片描述

  • 查看文件
    在这里插入图片描述

  • 删除文件
    在这里插入图片描述

最后

以上就是封装文件操作方法的主要内容,有不足之处,请多多指正。

相关文章:

uniapp项目实践总结(十三)封装文件操作方法

导语&#xff1a;在日常 APP 开发过程中&#xff0c;经常要进行文件的保存、读取列表以及查看和删除文件等操作&#xff0c;接下来就看一下具体的方法。 目录 原理分析方法实现实战演练案例展示 原理分析 主要是以下 API。 uni.saveFile&#xff1a;保存文件到本地缓存列表…...

程序地址空间

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;Linux——程序地址空间 ☂️<3>开发环境&#xff1a;Centos7 &#x1f4ac;<4>前言&#xff1a;我们一直随口就能说出来的栈区&#xff0c;堆区&#xff0c;常量…...

HBS 家庭总线驱动和接收芯片MS1192,应用于电话及相关设备、空调设备、安全设备、AV 装置

MS1192 是适用于 HBS 总线规范&#xff08;日本电子工业协会&#xff09; 的适配器芯片&#xff0c;具备发送、接收数据的功能。在发送接收 单元中&#xff0c;采用 AMI 编码方式&#xff0c;可使用双绞线进行互联&#xff0c;信 号传输采用差分方式。 芯片采用单电源…...

IO和进程day08(消息队列、共享内存、信号灯集)

今日任务 1.代码 inversion.c #include <stdio.h> #include <string.h> #include <stdlib.h> #include <sys/types.h> #include <sys/ipc.h> #include <sys/ipc.h> #include <sys/shm.h> #include <sys/types.h> #include …...

【数据结构】—堆排序以及TOP-K问题究极详解(含C语言实现)

食用指南&#xff1a;本文在有C基础的情况下食用更佳 &#x1f525;这就不得不推荐此专栏了&#xff1a;C语言 ♈️今日夜电波&#xff1a;ルミネセンス—今泉愛夏 1:01 ━━━━━━️&#x1f49f;──────── 5:05 …...

Python语言概述

​ 视频版教程 Python3零基础7天入门实战视频教程 Python作为一门非常流行的高级编程语言&#xff0c;自从22年开始&#xff0c;TIOBE编程语言排行榜Python一直排第一。 Python简洁高效&#xff0c;丰富的应用场景&#xff0c;受到广大程序员&#xff0c;科研工作者的喜爱。 …...

电子电路学习笔记之NCV84120DR2G——车规级单通道高压侧驱动器

关于车规级芯片&#xff1a; 关于车规级芯片&#xff08;Automotive Grade Chip&#xff09;&#xff0c;车规级芯片是专门用于汽车行业的芯片&#xff0c;具有高可靠性、高稳定性和低功耗等特点&#xff0c;以满足汽车电子系统的严格要求。这些芯片通常用于车载电子控制单元&…...

YOLO DNF辅助教程完结

课程完结&#xff01;撒花、撒花、撒花 课程完结&#xff01;撒花、撒花、撒花 课程完结&#xff01;撒花、撒花、撒花 ​呕心沥血三个月&#xff0c;《利用人工智能做DNF游戏辅助》系列实战课程已完结&#xff0c;技术路线贯穿串口通信、目标检测、opencv特征匹配等前沿技术…...

Hadoop-Hive

1. hive安装部署 2. hive基础 3. hive高级查询 4. Hive函数及性能优化 1.hive安装部署 解压tar -xvf ./apache-hive-3.1.2-bin.tar.gz -C /opt/soft/ 改名mv apache-hive-3.1.2-bin/ hive312 配置环境变量&#xff1a;vim /etc/profile #hive export HIVE_HOME/opt/soft/hive…...

竞赛 基于机器视觉的火车票识别系统

文章目录 0 前言1 课题意义课题难点&#xff1a; 2 实现方法2.1 图像预处理2.2 字符分割2.3 字符识别部分实现代码 3 实现效果最后 0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于机器视觉的火车票识别系统 该项目较为新颖&#xff0c;适合作为竞赛…...

conda与pip镜像源环境配置

文章目录 一. 参考二. conda三. pip 一. 参考 b站环境配置视频 校园网镜像站 二. conda 利用校园网镜像站, 找到conda的镜像源配置文档. 将下面的文档复制到电脑上的.condarc文件中. channels:- defaults show_channel_urls: true default_channels:- https://mirrors.tuna…...

Golang1.21更新内容全面介绍~

我的掘金平台原文地址Golang1.21更新内容全面介绍~ 前言 在Golang1.21这一次更新中&#xff0c;主要更新内容为&#xff1a; for range的一个语义变更 、 新加入max、min、clear方法、 contenxt增添api、 WASI的支持 本文主要带大家熟悉这些变更的内容~ 1.for语义的变更…...

ArcGIS 10.4安装教程!

软件介绍&#xff1a;ArcGIS是一款专业的电子地图信息编辑和开发软件&#xff0c;提供一种快速并且使用简单的方式浏览地理信息&#xff0c;无论是2D还是3D的信息。软件内置多种编辑工具&#xff0c;可以轻松的完成地图生产全过程&#xff0c;为地图分析和处理提供了新的解决方…...

华为云云服务器云耀L实例评测 | 从零开始:华为云云服务器L实例使用教程

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

ElasticSearch配置

2) 搭建ElasticSearch环境 2.1) 拉取镜像 docker pull elasticsearch:7.4.02.2) 创建容器 docker run -id --name elasticsearch -d --restartalways -p 9200:9200 -p 9300:9300 -v /usr/share/elasticsearch/plugins:/usr/share/elasticsearch/plugins -e "discovery.…...

MySQL优化第二篇

MySQL优化第二篇 性能分析小表驱动大表慢查询日志日志分析工具mysqldumpslow Show Profile进行SQL分析&#xff08;重中之重&#xff09; 七种JOIN 1、inner join &#xff1a;可以简写为join&#xff0c;表示的是交集&#xff0c;也就是两张表的共同数据 sql语句&#xff1a…...

基于python解决鸡兔同笼问题

一、什么是鸡兔同笼问题&#xff1f; 鸡兔同笼问题是一个经典的数学问题。问题描述&#xff1a;鸡和兔子共有头数a和脚数b&#xff0c;求鸡和兔子的数量。 解析&#xff1a;设鸡的数量为x&#xff0c;兔子的数量为y&#xff0c;那么可以得到以下两个方程&#xff1a; 1. x y…...

2023 Google 开发者大会|Mobile开发专题追踪

文章目录 前言大会介绍涉及内容MobileWebAICloud Mobile开发专题多终端应用的开发适配大屏视频流可穿戴设备电视新的设计中心 构建高质量的应用高级相机和媒体功能用户的安全和隐私更精细的视觉体验 小结 前言 哈喽大家好&#xff0c;我是阿Q。近期&#xff0c;【2023 Google …...

最新版WPS 2023 加载Zotero方法

安装wps2019vba.exe&#xff0c;获取链接&#xff1a;链接&#xff1a;https://pan.baidu.com/s/1eeoc6Tmwyzxh3n1MFQTVeA 提取码&#xff1a;6431 –来自百度网盘超级会员V8的分享 打开WPS的工具的加载项 添加文件路径&#xff0c;我的在&#xff1a; C:\Users\Administrat…...

详解爬虫策略,反爬虫策略,反反爬爬虫策略

爬虫策略 爬取策略是网络爬虫在执行网页抓取任务时所遵循的规则或策略。这些策略决定了爬虫如何从一个页面转到另一个页面&#xff0c;什么时间进行抓取&#xff0c;以及应该抓取哪些内容。以下是几种常见的爬取策略&#xff1a; 深度优先搜索&#xff08;DFS&#xff09; 在…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

基于当前项目通过npm包形式暴露公共组件

1.package.sjon文件配置 其中xh-flowable就是暴露出去的npm包名 2.创建tpyes文件夹&#xff0c;并新增内容 3.创建package文件夹...

【CSS position 属性】static、relative、fixed、absolute 、sticky详细介绍,多层嵌套定位示例

文章目录 ★ position 的五种类型及基本用法 ★ 一、position 属性概述 二、position 的五种类型详解(初学者版) 1. static(默认值) 2. relative(相对定位) 3. absolute(绝对定位) 4. fixed(固定定位) 5. sticky(粘性定位) 三、定位元素的层级关系(z-i…...

MySQL 8.0 OCP 英文题库解析(十三)

Oracle 为庆祝 MySQL 30 周年&#xff0c;截止到 2025.07.31 之前。所有人均可以免费考取原价245美元的MySQL OCP 认证。 从今天开始&#xff0c;将英文题库免费公布出来&#xff0c;并进行解析&#xff0c;帮助大家在一个月之内轻松通过OCP认证。 本期公布试题111~120 试题1…...

SpringCloudGateway 自定义局部过滤器

场景&#xff1a; 将所有请求转化为同一路径请求&#xff08;方便穿网配置&#xff09;在请求头内标识原来路径&#xff0c;然后在将请求分发给不同服务 AllToOneGatewayFilterFactory import lombok.Getter; import lombok.Setter; import lombok.extern.slf4j.Slf4j; impor…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

Redis:现代应用开发的高效内存数据存储利器

一、Redis的起源与发展 Redis最初由意大利程序员Salvatore Sanfilippo在2009年开发&#xff0c;其初衷是为了满足他自己的一个项目需求&#xff0c;即需要一个高性能的键值存储系统来解决传统数据库在高并发场景下的性能瓶颈。随着项目的开源&#xff0c;Redis凭借其简单易用、…...

计算机基础知识解析:从应用到架构的全面拆解

目录 前言 1、 计算机的应用领域&#xff1a;无处不在的数字助手 2、 计算机的进化史&#xff1a;从算盘到量子计算 3、计算机的分类&#xff1a;不止 “台式机和笔记本” 4、计算机的组件&#xff1a;硬件与软件的协同 4.1 硬件&#xff1a;五大核心部件 4.2 软件&#…...

从“安全密码”到测试体系:Gitee Test 赋能关键领域软件质量保障

关键领域软件测试的"安全密码"&#xff1a;Gitee Test如何破解行业痛点 在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的"神经中枢"。从国防军工到能源电力&#xff0c;从金融交易到交通管控&#xff0c;这些关乎国计民生的关键领域…...

tomcat指定使用的jdk版本

说明 有时候需要对tomcat配置指定的jdk版本号&#xff0c;此时&#xff0c;我们可以通过以下方式进行配置 设置方式 找到tomcat的bin目录中的setclasspath.bat。如果是linux系统则是setclasspath.sh set JAVA_HOMEC:\Program Files\Java\jdk8 set JRE_HOMEC:\Program Files…...