zoukankan      html  css  js  c++  java
  • 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内页面(这里是自己写的样式)

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

  • 相关阅读:
    【题解】UOJ61. 【UR #5】怎样更有力气
    【题解】Kruskal重构树——[NOI2018] 归程
    图论补档——KM算法+稳定婚姻问题
    NOIP2018 提高组题解
    杂物
    朱刘算法学习笔记
    文化课の疑难杂症
    FHQ简要笔记
    题解 AT3877 【[ARC089C] GraphXY】
    CSP-S 2020 退役记
  • 原文地址:https://www.cnblogs.com/huihuihero/p/14328700.html
Copyright © 2011-2022 走看看