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内页面(这里是自己写的样式)

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

  • 相关阅读:
    【[AH2017/HNOI2017]礼物】
    【[ZJOI2014]力】
    FFT抄袭笔记
    【[SCOI2015]小凸玩矩阵】
    【[SDOI2017]新生舞会】
    bzoj 3277: 串
    【[ZJOI2015]诸神眷顾的幻想乡】
    【[TJOI2017]DNA】
    【[TJOI2018]碱基序列】
    【[TJOI2018]异或】
  • 原文地址:https://www.cnblogs.com/huihuihero/p/14328700.html
Copyright © 2011-2022 走看看