Advanced cross platform application development (24): uni app realizes file download and saving

One 、 Download resources

APP In the process of application development , Resource downloading is a common application scenario .uni-app Application in uni.downloadFile Realize file download function . The sample code is as follows ：

downLoadFile() {
    
    const downloadTask = uni.downloadFile({
    
        url: 'http://img.netbian.com/file/2019/0414/7bee7eef5fc44417a0b02a46576e7e16.jpg', // Just for the sample , Not real resources 
            success: (res) => {
    
                if (res.statusCode === 200) {
    
                    console.log(' Download successful ');
                }
                this.dd = res.tempFilePath;
                console.log(this.dd);
        }
    });

    downloadTask.onProgressUpdate((res) => {
    
        console.log(' Download progress ' + res.progress);
        console.log(' The length of downloaded data ' + res.totalBytesWritten);
        console.log(' The total length of data that is expected to be downloaded ' + res.totalBytesExpectedToWrite);
    });
}

notes ： The temporary path to the file , It can be used normally during the application startup , For long-term preservation , Need to call on the initiative uni.saveFile, Can be accessed the next time the application starts .

Two 、 Resource preservation

When an application uni.downloadFile After the callback is successful tempFilePath The parameter represents the path to temporarily save the file , Reuse uni.saveFile Save it locally , The example code is as follows ：

downLoadFile() {
    
    const downloadTask = uni.downloadFile({
    
        url: 'http://img.netbian.com/file/2019/0414/7bee7eef5fc44417a0b02a46576e7e16.jpg', // Just for the sample , Not real resources 
        success: (res) => {
    
            if (res.statusCode === 200) {
    
                console.log(' Download successful ');
            }
            let that = this;
            uni.saveFile({
    
                tempFilePath: res.tempFilePath,
                    success: function(red) {
    
                        that.luj = red.savedFilePath
                        console.log(red)
                    }
                });
            }
        });

        downloadTask.onProgressUpdate((res) => {
    
            console.log(' Download progress ' + res.progress);
            console.log(' The length of downloaded data ' + res.totalBytesWritten);
            console.log(' The total length of data that is expected to be downloaded ' + res.totalBytesExpectedToWrite);
    });
}

The location where resources are downloaded and saved is :

“ Internal storage \Android\data\io.dcloud.HBuilder\apps\HBuilder\doc\uniapp_save”

3、 ... and 、 Resource open

// Save the file locally 
uni.saveFile({
    
    tempFilePath: data.tempFilePath, // Temporary path 
    success: function(res) {
    
        uni.showToast({
    
            icon: 'none',
            mask: true,
            title: ' The file has been saved ：' + res.savedFilePath, // Save the path 
            duration: 3000,
        });
        setTimeout(() => {
    
            // Open document view 
            uni.openDocument({
    
                filePath: res.savedFilePath,
                success: function(res) {
    
                    // console.log(' Successfully opened the document ');
                }
            });
        }, 3000)
    }
});

Four 、 Save pictures to your local album

uni.downloadFile({
    
   url: imgUrl[0],
   success: (res) => {
    
       if (res.statusCode === 200) {
    
           // Save picture to system album 
           uni.saveImageToPhotosAlbum({
    
               filePath: res.tempFilePath,
               success: function() {
    
                   uni.showToast({
    
                       title: " Saved successfully ",
                       icon: "none"
                   });
                   return
               },
               fail: function() {
    
                   uni.showToast({
    
                       title: " Save failed , Please try again later ",
                       icon: "none"
                   });
                   return
               }
           });
       }
   }
})

5、 ... and 、 Expanding reading

• 《Cross-platform APP special column 》