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

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

一、资源下载

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('打开文档成功');
                }


## 最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**