download-file.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view>
        <view v-if="imageSrc">
          <image class="img" :src="imageSrc" mode="aspectFit" />
        </view>
        <view v-else style="margin: 10px;">
          <text class="uni-hello-text">点击按钮下载服务端示例图片（下载网络文件到本地临时目录）</text>
          <button type="primary" @tap="downloadImage">下载</button>
        </view>
      </view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script>

  // #ifdef APP
  import {
    testInovkeDownloadFile,
    CommonOptions
  } from '@/uni_modules/test-invoke-network-api'
  // #endif

  export default {
    data() {
      return {
        title: 'downloadFile',
        imageSrc: '',
        task: null as DownloadTask | null,
        //自动化测试例专用
        jest_result: false
      }
    },
    onLoad() {
    },
    onUnload() {
      // this.imageSrc = '';
      uni.hideLoading();
      this.task?.abort();
    },
    methods: {
      downloadImage: function () {
        uni.showLoading({
          title: '下载中'
        })
        var self = this
        this.task = uni.downloadFile({
          url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
          success: (res) => {
            console.log('downloadFile success, res is', res.tempFilePath)
            self.imageSrc = res.tempFilePath;
            uni.hideLoading();
          },
          fail: (err) => {
            console.log('downloadFile fail, err is:', err)
            uni.hideLoading();
          }
        });
        this.task?.onProgressUpdate((update) => {
          console.log("progress : ", update.progress);
        })
      },
      //自动化测试例专用
      jest_downloadFile() {
        uni.downloadFile({
          url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
          success: () => {
            this.jest_result = true
          },
          fail: () => {
            this.jest_result = false
          }
        });
      },

      jest_downloadFile_with_uni_env() {
        uni.downloadFile({
          url: "https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
          filePath: `${uni.env.CACHE_PATH}/a/b/`,
          success: () => {
            this.jest_result = true
          },
          fail: () => {
            this.jest_result = false
          }
        });
      },

      jest_set_cookie(){
        uni.request({
          url: "https://request.dcloud.net.cn/api/http/header/setCookie",
          method: "GET",
          timeout: 6000,
          sslVerify: false,
          withCredentials: true,
          firstIpv4: false,
          success: () => {
            this.jest_cookie_download(true)
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },

      jest_delete_cookie(){
        uni.request({
          url: "https://request.dcloud.net.cn/api/http/header/deleteCookie",
          method: "GET",
          timeout: 6000,
          sslVerify: false,
          withCredentials: true,
          firstIpv4: false,
          success: () => {
            this.jest_cookie_download(false)
          },
          fail: () => {
            this.jest_result = false;
          },
        });
      },
      jest_cookie_download(needCookie: boolean){
        uni.downloadFile({
          url: "https://request.dcloud.net.cn/api/http/header/download",
          success: () => {
            this.jest_result = needCookie ? true : false;
          },
          fail: () => {
            this.jest_result = needCookie ? false : true;
          }
        });
      },
      jest_uts_module_invoked(){
        // #ifdef APP
        testInovkeDownloadFile({
          success:(res: any)=>{
            console.log("success :", res);
            this.jest_result = true
          },
          fail:(err: any)=>{
            console.log("fail :", err);
            this.jest_result = false
          }
        } as CommonOptions)
        // #endif
      }
    }
  }
</script>

<style>
  .img {
    margin: 0 auto;
  }
</style>