导语：在日常 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 H5fetch(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-WEIXINconst 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-PLUSuni.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案例展现
- 保留文件
- 查看文件
- 删除文件
最初
以上就是封装文件操作方法的次要内容，有不足之处，请多多斧正。