uni-app下载图片(新手上路)

app端下载图片

this.$h5Util.interaction('保存图片', '是否保存到本地相册').then(res => {  
                    if (res == 1) {  
                        // const downloadTask =   
                        uni.downloadFile({  
                            url: this.str, //这里为图片路径  
                            success: (res) => {  
                                if (res.statusCode === 201) {  
                                    uni.saveImageToPhotosAlbum({  
                                        filePath: res.tempFilePath,  
                                        success: function() {  
                                            uni.showToast({  
                                                title: '保存成功!',  
                                                icon: 'none'  
                                            })  
                                        },  
                                        fail: function() {  
                                            uni.showToast({  
                                                title: '保存失败,请稍后重试!',  
                                                icon: 'none'  
                                            })  
                                        }  
                                    });  
                                }  
                            }  
                        });  
                        // downloadTask.onProgressUpdate((res) => {  
                        //  this.bt=true;  
                        //     console.log('下载进度' + res.progress);  
                        //     console.log('已经下载的数据长度' + res.totalBytesWritten);  
                        //     console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);  
                        //  this.br=(res.totalBytesWritten/res.totalBytesExpectedToWrite)*100  
                        //     // 测试条件,取消下载任务。  
                        //     // if (res.progress > 50) {  
                        //     //     downloadTask.abort();  
                        //     // }  
                        // });  

                    }  
                })

pc端测试时H5下载

需要: Base64
import {  
        pathToBase64, //图片路径转base64  
        base64ToPath, //base64码转图片  
    } from '@/js_sdk/gsq-image-tools/image-tools/index.js'  
var url;  

this.$h5Util.interaction('保存图片', '手机H5点击或长按二维码保存').then(res => {  
                    if (res == 1) {  
                    uni.downloadFile({  
                        url: this.str, //这里为图片路径  
                        success: (res) => {  
                            if (res.statusCode === 201) {  
                                pathToBase64(res.tempFilePath).then(base64 => {  
                                        url = base64;  
                                        var oA = document.createElement("a");  
                                        oA.download =" ";// 设置下载的文件名,默认是'下载'  
                                        oA.href = url;  
                                        oA.click();  
                                        document.body.appendChild(oA);  
                                        oA.remove(); // 下载之后把创建的元素删除  
                                    })  
                                    .catch(error => {  
                                        console.error(error)  
                                    })  
                            }  
                        }  
                    });

手机H5端可以点击图片或长按直接保存
目前只找到这些嘿嘿

猜你喜欢

转载自blog.csdn.net/ycg_x_y/article/details/107895690