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

news2024/11/24 20:47:12

导语：在日常 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-WEIXIN
  let fsm = wx.getFileSystemManager();
  ifs.list = fsm.getSavedFileList;
  ifs.info = fsm.getFileInfo;
  ifs.delete = fsm.unlink;
  ifs.open = fsm.open;
  // #endif
  // #ifdef APP-PLUS
  ifs.list = uni.getSavedFileList;
  ifs.info = uni.getSavedFileInfo;
  ifs.delete = uni.removeSavedFile;
  ifs.open = uni.openDocument;
  // #endif
  return 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 exception
    return {
      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 exception
    return {
      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 exception
    return {
      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.coloradmin.cn/o/989336.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

处理流程设计-系统设计-人机界面设计

处理流程设计-系统设计-人机界面设计

处理流程设计-系统设计-人机界面设计 流程表示工具&#xff08;重点&#xff09; 流程表示工具&#xff08;重点&#xff09; 数据流图也是一种 IPO 图 NS图和PAD图
阅读更多...
为什么说电子元器件采购如果不够专业就容易上当受骗

为什么说电子元器件采购如果不够专业就容易上当受骗

电子元器件采购如果不够专业就容易上当受骗的原因有多方面&#xff0c;主要包括以下几点&#xff1a; 众多供应商和产品&#xff1a;电子元器件市场涉及众多供应商和各种不同的产品。如果采购人员不具备足够的专业知识和经验&#xff0c;可能会难以识别哪些供应商和产品是可信赖…
阅读更多...
flink 写入数据到 kafka 后，数据过一段时间自动删除

flink 写入数据到 kafka 后，数据过一段时间自动删除

版本 flink 1.16.0kafka 2.3 流程描述&#xff1a; flink利用KafkaSource&#xff0c;读取kafka的数据&#xff0c;然后经过一系列的处理&#xff0c;通过KafkaSink&#xff0c;采用 EXACTLY_ONCE 的模式&#xff0c;将处理后的数据再写入到新的topic中。 问题描述&#xff1…
阅读更多...
【SpringMVC]获取参数的六种方式

【SpringMVC]获取参数的六种方式

目录 1.通过ServletAPI获取 2.通过控制器方法的形参获取 3.RequestParam&#xff1a;将请求参数和控制器方法的形参绑定 4.RequestHeader&#xff1a;将请求头信息与控制器方法的形参的值进行绑定 5. CookieValue&#xff1a;将cookie数据和控制器方法的形参绑定 Cookie&…
阅读更多...
入门人工智能 —— 学习一门编程语言 python 基础代码编写和运算符介绍（1）

入门人工智能 —— 学习一门编程语言 python 基础代码编写和运算符介绍（1）

入门人工智能 —— 学习一门编程语言 python&#xff08;1&#xff09; 入门流程1.安装pythonwindowslinux ubuntu 代码编写打印输出结果 基本加减法介绍基本运算符 随着人工智能技术的快速发展&#xff0c;越来越多的年轻人开始关注这个领域。作为入门者&#xff0c;学习人工智…
阅读更多...
文心一言 VS 讯飞星火 VS chatgpt （88）-- 算法导论8.3 1题

文心一言 VS 讯飞星火 VS chatgpt （88）-- 算法导论8.3 1题

一、用go语言&#xff0c;参照图 8-3 的方法&#xff0c;说明 RADIX-SORT在下列英文单词上的操作过程:COW&#xff0c;DOG&#xff0c;SEA&#xff0c;RUG&#xff0c;ROW&#xff0c;MOB&#xff0c; BOX&#xff0c; TAB&#xff0c; BAR&#xff0c; EAR&#xff0c;TAR&…
阅读更多...
Java基于 SpringBoot 的车辆充电桩系统

Java基于 SpringBoot 的车辆充电桩系统

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1、效果演示效果图技术栈 2、 前言介绍&#xff08;完整源码请私聊&#xff09;3、主要技术3.4.1 …
阅读更多...
AI人工智能Mojo语言：AI的新编程语言

AI人工智能Mojo语言：AI的新编程语言

推荐&#xff1a;使用 NSDT场景编辑器 快速搭建3D应用场景 Mojo的主要功能包括&#xff1a; 类似Python的语法和动态类型使Python开发人员易于学习Mojo&#xff0c;因为Python是现代AI / ML开发背后的主要编程语言。使用Mojo&#xff0c;您可以导入和使用任何Python库&#xf…
阅读更多...
2.8 PE结构：资源表详细解析

2.8 PE结构：资源表详细解析

在Windows PE中&#xff0c;资源是指可执行文件中存放的一些固定不变的数据集合&#xff0c;例如图标、对话框、字符串、位图、版本信息等。PE文件中每个资源都会被分配对应的唯一资源ID&#xff0c;以便在运行时能够方便地查找和调用它们。PE文件中的资源都被组织成一个树形结…
阅读更多...
“链主品牌”竞争战略四大误区

“链主品牌”竞争战略四大误区

在《财富》500 强企业名单中&#xff0c;2008 年中国企业仅有 37 家&#xff0c;而 2019 年攀升至 119 家&#xff0c;与美国仅相差两家。2008 年&#xff0c;中国关注的问题是其在世界 500 强榜单上的企业数量太少。而如今的讨论则集中在为何中国企业规模大却实力不强。原因在…
阅读更多...
有哪些做流程图的软件？分享一些制作方法和注意事项

有哪些做流程图的软件？分享一些制作方法和注意事项

流程图是一种常用的图表&#xff0c;可以用于表示各种工作流程、系统架构、决策流程等。在现代工作生活中&#xff0c;制作流程图已经成为了必备的技能之一。本文将介绍一些常用的做流程图的工具&#xff0c;并分享一些制作方法和注意事项。 做流程图的工具 1.迅捷画图&#x…
阅读更多...
Node.js安装教程图文详解

Node.js安装教程图文详解

版权声明 本文原创作者&#xff1a;谷哥的小弟作者博客地址&#xff1a;http://blog.csdn.net/lfdfhl 下载Node.js 请下载Node.js并保存至本地&#xff0c;官方网址&#xff1a;https://nodejs.org/zh-cn/ 在此&#xff0c;选择windows系统64位的16.13.1版本进行下载。 下载…
阅读更多...
【SLAM】Sophus库的超详细解析

【SLAM】Sophus库的超详细解析

在视觉SLAM中&#xff0c;李群李代数是描述位姿比较常用的一种表达形式。但是&#xff0c;在Eigen中并不提供对它的支持&#xff0c;一个较好的李群和李代数的库是Sophus库&#xff0c;它很好的支持了SO3、so3、SE3、se3。 Sophus简介 代码仓库&#xff1a;https://github.com…
阅读更多...
laravel系列(二) Dcat admin框架开发工具使用

laravel系列(二) Dcat admin框架开发工具使用

开发工具可以非常好的帮助我们去快速的开发CURD等操作,但也是有部分框架有些不是太便捷操作,这篇博客主要为大家介绍Dcat admin的开发工具详细使用. 如何创建页面: 在联表我们首先要去.env文件中去找连接数据库方法: APP_NAMELaravel APP_ENVlocal APP_KEYbase64:thO0lOVlzj0…
阅读更多...
机器学习入门教学——人工智能、机器学习、深度学习

机器学习入门教学——人工智能、机器学习、深度学习

1、人工智能 人工智能相当于人类的代理人&#xff0c;我们现在所接触到的人工智能基本上都是弱AI&#xff0c;主要作用是正确解释从外部获得的数据&#xff0c;并对这些数据加以学习和利用&#xff0c;以便灵活的实现特定目标和任务。例如&#xff1a; 阿尔法狗、智能汽车简单…
阅读更多...
苹果跨入“迷你超级周期”：iPhone15Pro占比提升75%，性价比高？

苹果跨入“迷你超级周期”：iPhone15Pro占比提升75%，性价比高？

据美国投行韦德布什证券的分析师Daniel Ives最近发布的投资者报告&#xff0c;苹果公司今年推出的iPhone 15机型比例已经从往年的3&#xff1a;2调整为了3&#xff1a;1&#xff0c;这标志着苹果公司跨入了“迷你超级周期”。 分析师郭明錤曾预测&#xff0c;今年iPhone 15系列…
阅读更多...
【深度学习】 Python 和 NumPy 系列教程（二）：Python基本数据类型：3、字符串（索引、切片、运算、格式化）

【深度学习】 Python 和 NumPy 系列教程（二）：Python基本数据类型：3、字符串（索引、切片、运算、格式化）

目录 一、前言 二、实验环境 三、Python基本数据类型 3. 字符串&#xff08;Strings&#xff09; 1. 初始化 2. 索引 3. 切片 4. 运算 a. 拼接运算 b. 复制运算 c. 子串判断 d. 取长度 5. 格式化 a. 使用位置参数 b. 使用关键字参数 c. 使用属性访问 f-string…
阅读更多...
在家也能轻松使用用友畅捷通T3管理财务，实现高效率远程办公！

在家也能轻松使用用友畅捷通T3管理财务，实现高效率远程办公！

文章目录 前言1. 用友畅捷通T3借助cpolar实现远程办公1.1 在被控端电脑上&#xff0c;点击开始菜单栏&#xff0c;打开设置——系统1.2 找到远程桌面1.3 启用远程桌面 2. 安装cpolar内网穿透2.1 注册cpolar账号2.2 下载cpolar客户端 3. 获取远程桌面公网地址3.1 登录cpolar web…
阅读更多...
三.listview或tableviw显示

三.listview或tableviw显示

一.使用qt creator 转变类型 变形为listview或tableviw 二.导出ui文件为py文件 # from123.py 为导出 py文件 form.ui 为 qt creator创造的 ui 文件 pyuic5 -o x:\xxx\from123.py form.uifrom123.py listview # -*- coding: utf-8 -*-# Form implementation generated fro…
阅读更多...
GDAL Python 过滤Shape Polygon中的面积小于某个阈值的小图斑

GDAL Python 过滤Shape Polygon中的面积小于某个阈值的小图斑

# -*- coding: utf-8 -*- # !/usr/bin/mgdal_env # Time : 2023/9/6 9:36 # Author : Hexk # 过滤矢量文件中的面积小于某个阈值的小图斑from osgeo import ogr, gdal, osr import osdef ShapeFiltratePitch(_input_path, _output_path, _area_threshold):"""过…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023