写点什么

跨平台应用开发进阶 (二十四) :uni-app 实现文件下载并保存

  • 2022-12-19
    江苏
  • 本文字数:1680 字

    阅读完需:约 6 分钟

跨平台应用开发进阶(二十四) :uni-app实现文件下载并保存

一、资源下载

APP 应用开发过程中,资源下载是一种常见应用场景。uni-app中应用uni.downloadFile实现文件下载功能。示例代码如下:


downLoadFile() {    const downloadTask = uni.downloadFile({        url: 'http://img.netbian.com/file/2019/0414/7bee7eef5fc44417a0b02a46576e7e16.jpg', //仅为示例,并非真实的资源            success: (res) => {                if (res.statusCode === 200) {                    console.log('下载成功');                }                this.dd = res.tempFilePath;                console.log(this.dd);        }    });
downloadTask.onProgressUpdate((res) => { console.log('下载进度' + res.progress); console.log('已经下载的数据长度' + res.totalBytesWritten); console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite); });}
复制代码


注:文件的临时路径,在应用本次启动期间可以正常使用,如需持久保存,需在主动调用 uni.saveFile,才能在应用下次启动时访问得到。

二、资源保存

当应用uni.downloadFile回调成功后tempFilePath参数代表临时保存文件的路径,再使用uni.saveFile保存到本地即可,实例代码如下:


downLoadFile() {    const downloadTask = uni.downloadFile({        url: 'http://img.netbian.com/file/2019/0414/7bee7eef5fc44417a0b02a46576e7e16.jpg', //仅为示例,并非真实的资源        success: (res) => {            if (res.statusCode === 200) {                console.log('下载成功');            }            let that = this;            uni.saveFile({                tempFilePath: res.tempFilePath,                    success: function(red) {                        that.luj = red.savedFilePath                        console.log(red)                    }                });            }        });
downloadTask.onProgressUpdate((res) => { console.log('下载进度' + res.progress); console.log('已经下载的数据长度' + res.totalBytesWritten); console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite); });}
复制代码


资源下载并保存的位置为:


“内部存储\Android\data\io.dcloud.HBuilder\apps\HBuilder\doc\uniapp_save”

三、资源打开

//文件保存到本地uni.saveFile({    tempFilePath: data.tempFilePath, //临时路径    success: function(res) {        uni.showToast({            icon: 'none',            mask: true,            title: '文件已保存:' + res.savedFilePath, //保存路径            duration: 3000,        });        setTimeout(() => {            //打开文档查看            uni.openDocument({                filePath: res.savedFilePath,                success: function(res) {                    // console.log('打开文档成功');                }            });        }, 3000)    }});
复制代码

四、图片保存到本机相册

uni.downloadFile({   url: imgUrl[0],   success: (res) => {       if (res.statusCode === 200) {           //保存图片到系统相册           uni.saveImageToPhotosAlbum({               filePath: res.tempFilePath,               success: function() {                   uni.showToast({                       title: "保存成功",                       icon: "none"                   });                   return               },               fail: function() {                   uni.showToast({                       title: "保存失败,请稍后重试",                       icon: "none"                   });                   return               }           });       }   }})
复制代码

五、拓展阅读

发布于: 刚刚阅读数: 3
用户头像

No Silver Bullet 2021-07-09 加入

岂曰无衣 与子同袍

评论

发布
暂无评论
跨平台应用开发进阶(二十四) :uni-app实现文件下载并保存_uni-app_No Silver Bullet_InfoQ写作社区