小程序下载文件保持原有的文件名并打开保存的源文件_uni.downloadfile

我们使用uniapp开发小程序时，经常会有文件下载和保存操作，关于文件的保存操作，可参考我的上一篇文章，这里我主要介绍下下载的时候如何保存原来的名称，并且打开也打开原来的文件。

下载文件的API uni.downloadFile 提供一个文件地址，可以实现下载，但是但是保存位置是当前小程序提供的临时地址。

更具以上问题，如果想要保存我们指定的地址并且，保存原来的名称的话，需要我们指定地址。

const oldName: String = decodeURI(res.data); //这里是接口返回文件url 
 const startIndex = oldName.lastIndexOf("/") + 1; 
 // 提取文件名
 const fileName: String = oldName.substring(startIndex);// 截取文件名称部分
 // 这样我们得到文件名称。
 uni.downloadFile({
   url: oldName,
   filePath: `ttfile://user/${fileName}`,  // 这就是我们指定的下载位置，ttfile://user/ 这是飞书的固定常亮，微信/支付宝等都有对应的常量
   success: (res) => {
     
   },
   fail: (err) => {
     
   },
 });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

decodeURI 这个要注意，如果你的文件名称中含有汉字，最好还是处理下。
关键就是这个位置 ttfile://user/ (飞书的文件目录)，这样我们就把文件保存到对应应用的指定目录下。

接下来我们怎么打开这个文件

我们使用uniapp的打开文件api uni.openDocument这就是打开文件api.

uni.openDocument({
    filePath: `ttfile://user/${fileName}`,
    showMenu: true,
    success: () => {
      console.log("打开文档成功");
    },
    fail: () => {
      console.log("文件打开失败");
    },
  });
1
2
3
4
5
6
7
8
9
10

ttfile://user/${fileName} 这个就是你上次保存的位置，这样就打开具体的文件。

如果不经过上述操作，下载的时候，不指定位置，则打开文件只能打开刚才下载的临时文件。

根据需求吧，如果产品有强制要求要打开原来的文件，文件名称必须和后端接口返回的文件名称一致。这个办法还是很好的。