uni-app实现文件下载并保存

举报
SHQ5785 发表于 2024/05/08 09:22:24 2024/05/08
【摘要】 一、资源下载APP应用开发过程中,资源下载是一种常见应用场景。uni-app中应用uni.downloadFile实现文件下载功能。示例代码如下:downLoadFile() { const downloadTask = uni.downloadFile({ url: 'http://img.netbian.com/file/2019/0414/7bee7eef5fc4...

一、资源下载

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
               }
           });
       }
   }
})

五、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。