app下载文件,保存文件,展示文件(以图片文件为例)

直接贴代码(仅供参考,未将重复代码简化,如有需要可自行简化)

相关文档

https://uniapp.dcloud.io/api/request/network-file?id=downloadfile
https://uniapp.dcloud.io/api/file/file?id=savefile

beforeDestroy() {
    if(this.proveImgUrl){
        uni.removeSavedFile({  //离开页面时清除证书图片文件,防止占用内存(如有需要也可不清除)
            filePath: this.proveImgUrl,
            success: () => {}
        })
    }
},

methods:{
    //生成荣誉证书图片
    getProveImg(){
        if(this.proveImgUrl){  //已获取过证书文件
            uni.openDocument({  //直接打开证书文件
                filePath: this.proveImgUrl,
                success: () => {
                    // uni.showToast({title: '获取成功',icon:'none'})
                },
                fail: ()=>{
                    this.proveImgUrl=""
                    uni.showToast({title: '获取失败,请稍后再试',icon:'none'})
                }
            });
        }else{  //还未获取过证书文件
            uni.showLoading({title: '正在获取,请稍后。。。',mask: true});
            uni.downloadFile({  //下载文件
                url: `${this.$baseUrl}/api-video/getProveImg?vid=${this.vid}`,  //后端文件地址接口
                header: {  //此用户token
                    "Token":this.userToken,
                },
                success: data => {
                    if (data.statusCode == 200) {
                        uni.saveFile({  //保存文件
                            tempFilePath: data.tempFilePath,  //下载文件的临时地址
                            success: res => {
                                this.proveImgUrl=res.savedFilePath  //文件保存后的地址
                                uni.openDocument({  //打开证书文件
                                    filePath: this.proveImgUrl,
                                    success: () => {
                                        uni.hideLoading()
                                        // uni.showToast({title: '获取成功',icon:'none'})
                                    },
                                    fail: () => {
                                        uni.hideLoading()
                                        uni.showToast({title: '获取失败,请稍后再试',icon:'none'})
                                    }
                                });
                            },
                            fail: () => {
                                uni.hideLoading()
                                uni.showToast({title: '获取失败,请稍后再试',icon:'none'})
                            }
                        })
                    }else{
                        uni.hideLoading()
                        uni.showToast({title: '获取失败,请稍后再试',icon:'none'})
                    }
                },
                fail: ()=>{
                    uni.hideLoading()
                    uni.showToast({title: '获取失败,请稍后再试',icon:'none'})
                }
            });
        }
    },
}

app内页面(这里是自己写的样式)

点击“查看证书文件”按钮后展示文件(这里是后端接口生成的文件)

原文地址:https://www.cnblogs.com/huihuihero/p/14328700.html