当前位置: 首页 > 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; 在…...

DockerHub与私有镜像仓库在容器化中的应用与管理

哈喽&#xff0c;大家好&#xff0c;我是左手python&#xff01; Docker Hub的应用与管理 Docker Hub的基本概念与使用方法 Docker Hub是Docker官方提供的一个公共镜像仓库&#xff0c;用户可以在其中找到各种操作系统、软件和应用的镜像。开发者可以通过Docker Hub轻松获取所…...

Java多线程实现之Callable接口深度解析

Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...

Frozen-Flask :将 Flask 应用“冻结”为静态文件

Frozen-Flask 是一个用于将 Flask 应用“冻结”为静态文件的 Python 扩展。它的核心用途是&#xff1a;将一个 Flask Web 应用生成成纯静态 HTML 文件&#xff0c;从而可以部署到静态网站托管服务上&#xff0c;如 GitHub Pages、Netlify 或任何支持静态文件的网站服务器。 &am…...

C++.OpenGL (10/64)基础光照(Basic Lighting)

基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...

【服务器压力测试】本地PC电脑作为服务器运行时出现卡顿和资源紧张(Windows/Linux)

要让本地PC电脑作为服务器运行时出现卡顿和资源紧张的情况&#xff0c;可以通过以下几种方式模拟或触发&#xff1a; 1. 增加CPU负载 运行大量计算密集型任务&#xff0c;例如&#xff1a; 使用多线程循环执行复杂计算&#xff08;如数学运算、加密解密等&#xff09;。运行图…...

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

mac 安装homebrew (nvm 及git)

mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用&#xff1a; 方法一&#xff1a;使用 Homebrew 安装 Git&#xff08;推荐&#xff09; 步骤如下&#xff1a;打开终端&#xff08;Terminal.app&#xff09; 1.安装 Homebrew…...

解读《网络安全法》最新修订,把握网络安全新趋势

《网络安全法》自2017年施行以来&#xff0c;在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂&#xff0c;网络攻击、数据泄露等事件频发&#xff0c;现行法律已难以完全适应新的风险挑战。 2025年3月28日&#xff0c;国家网信办会同相关部门起草了《网络安全…...

高考志愿填报管理系统---开发介绍

高考志愿填报管理系统是一款专为教育机构、学校和教师设计的学生信息管理和志愿填报辅助平台。系统基于Django框架开发&#xff0c;采用现代化的Web技术&#xff0c;为教育工作者提供高效、安全、便捷的学生管理解决方案。 ## &#x1f4cb; 系统概述 ### &#x1f3af; 系统定…...

书籍“之“字形打印矩阵(8)0609

题目 给定一个矩阵matrix&#xff0c;按照"之"字形的方式打印这个矩阵&#xff0c;例如&#xff1a; 1 2 3 4 5 6 7 8 9 10 11 12 ”之“字形打印的结果为&#xff1a;1&#xff0c;…...