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

案例展示

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

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

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

最后

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

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

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

相关文章

【LeetCode-中等题】39. 组合总和

【LeetCode-中等题】39. 组合总和

文章目录 题目方法一&#xff1a;递归回溯 题目 这题的nums数组里面不存在重复元素&#xff0c;所以也就无需做去重操作 但同一个元素可以被无限次取&#xff0c;说明每次递归中的for循环的开始位置就是自己 nums数组里面存在重复元素&#xff0c;去重版本&#xff1a; 方法一…
阅读更多...
Linux学习之基础工具一

Linux学习之基础工具一

1.Linux 软件包管理器 yum 首先我们需要知道的是在Linux下&#xff0c;现存的软件和指令是一定的&#xff0c;而有的时候我们想需要更多的指令或者软件&#xff0c;而这在Linux本身下是没有的&#xff0c;故我们可以利用指令yum指令安装或卸载你想要或者不需要的软件&#xff…
阅读更多...
angular中多层嵌套结构的表单如何处理回显问题

angular中多层嵌套结构的表单如何处理回显问题

最近在处理angular表单时&#xff0c;有一个4层结构的表单。而且很多元素时动态生成&#xff0c;如下&#xff1a; this.validateFormthis.fb.group({storeId: ["test12"],storeNameKey:[],config:this.fb.group({ tableSize:this.fb.group({toggle:[false],groupSiz…
阅读更多...
第69步 时间序列建模实战：ARIMA建模（R）

第69步 时间序列建模实战：ARIMA建模（R）

基于WIN10的64位系统演示 一、写在前面 这一期&#xff0c;我们使用R进行SARIMA模型的构建。 同样&#xff0c;这里使用这个数据&#xff1a; 《PLoS One》2015年一篇题目为《Comparison of Two Hybrid Models for Forecasting the Incidence of Hemorrhagic Fever with Re…
阅读更多...
【设计模式】二、UML 类图概述

【设计模式】二、UML 类图概述

文章目录 常见含义含义依赖关系&#xff08;Dependence&#xff09;泛化关系&#xff08;Generalization&#xff09;实现关系&#xff08;Implementation&#xff09;关联关系&#xff08;Association&#xff09;聚合关系&#xff08;Aggregation&#xff09;组合关系&#x…
阅读更多...
SpringBoot原理-自动配置-原理分析-源码跟踪

SpringBoot原理-自动配置-原理分析-源码跟踪

自动配置原理 SpringBootApplication 该注解标识在SpringBoot项目的启动类上&#xff0c;是SpringBoot中最为重要的注解&#xff0c;该注解由三个部分组成。 SpringBootConfiguration&#xff1a;该注解与Configuration注解作用一样&#xff0c;用来声明当前类为一个配置类Comp…
阅读更多...
redis缓存详解

redis缓存详解

一、Redisson分布式锁存在问题 1、基于redis实现的分布式锁&#xff0c;如果redis集群出现master宕机&#xff0c;而从节点没有接收到锁对应的key&#xff0c;被选举成新的master就可能存在被其它线程加锁成功则存在加锁问题 2、 基于上面的问题&#xff0c;可以把redis分为多…
阅读更多...
便捷查询中通快递，详细物流信息轻松获取

便捷查询中通快递，详细物流信息轻松获取

在如今快节奏的生活中&#xff0c;快递已成为人们生活中不可或缺的一部分。然而&#xff0c;快递查询却常常让人头疼&#xff0c;因为需要分别在不同的快递公司官网上进行查询&#xff0c;耗费时间和精力。为了解决这个问题&#xff0c;固乔科技推出了一款便捷的快递查询助手&a…
阅读更多...
HTTPS协议和SOCKS5协议的区别

HTTPS协议和SOCKS5协议的区别

HTTPS协议和SOCKS5协议是两种不同的网络协议&#xff0c;它们在传输数据的方式、安全性和使用场景等方面都有所不同。下面将介绍HTTPS协议与SOCKS5协议的区别。 传输数据的方式 HTTPS协议是一种基于HTTP协议的安全协议&#xff0c;它使用SSL/TLS协议对数据进行加密和解密。在传…
阅读更多...
MATLAB入门-数据的导入和导出

MATLAB入门-数据的导入和导出

MATLAB入门-数据的导入和导出 注&#xff1a;本篇文章是课程学习笔记&#xff0c;课程链接为&#xff1a;头歌 常见的几个导入数据的方法 load函数 load函数专门用于引入MATLAB的.mat格式数据&#xff0c;十分的简单方便。 例如&#xff1a;一个-ASCII编码形式存储的数据文件…
阅读更多...
JS看板：bryntum taskboard 5.5.2 Crack

JS看板：bryntum taskboard 5.5.2 Crack

Bryntum 任务板是一个灵活的看板 Web 组件&#xff0c;可帮助您可视化和管理您的工作。 任务板非常灵活&#xff0c;允许您完全自定义卡片、列和泳道的渲染和样式。借助丰富的 API&#xff0c;您甚至可以在运行时打开或关闭功能。 在繁忙的团队中跟踪任务可能会令人畏惧。任务…
阅读更多...
pandas入门

pandas入门

Pandas 是在 Numpy 上的封装。 继承了 Numpy 的所有优点&#xff0c;但是这种封装有好有坏 我们对比一下两者创建的形式和效果 import pandas as pd import numpy as np anp.array([[1,2],[3,4]]) bpd.DataFrame({"a":[1,2],"b":[3,4]} ) print(a,"\…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023