关于前端:uniapp项目实践总结十三封装文件操作方法

7次阅读

共计 5637 个字符，预计需要花费 15 分钟才能阅读完成。

导语：在日常 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

保留文件
查看文件
删除文件

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

正文完

前端

发表至：前端

2023-09-08

0

关于前端:用CSS便可实现的效果以及解决几个小问题

关于前端:webpack中stylelint配置手动校验样式方案

react-url传参持续化刷新页面参数不消失

关于前端:vue3源码二vue3的响应系统分析

关于java:微服务粗略

关于前端:uniapp项目实践总结十三封装文件操作方法

目录

原理剖析

办法实现

保留文件

获取文件治理

文件列表

查看文件

删除文件

实战演练

模板内容

脚本办法

案例展现

最初

站内搜索