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 v-else style="margin: 10px;">
          <text class="uni-hello-text">下载接口的Content-Disposition中的filename非法值例子</text>
          <button type="primary" @tap="downloadErrorFilename">下载</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;
          },
          fail: (err) => {
            console.log('downloadFile fail, err is:', err)
          },
          complete: (res) => {
            uni.hideLoading();
            this.task = null;
          }
        });
        this.task?.onProgressUpdate((update) => {
          console.log("progress : ", update.progress);
        })
      },
      downloadErrorFilename(){
        uni.downloadFile({
          url:"https://qiniu-web-assets.dcloud.net.cn/uni-app-x/static/file/test9.txt",
          success: (res) => {
            console.log('downloadFile success, res is', res.tempFilePath)
          },
          fail: (err) => {
            console.log('downloadFile fail, err is:', err)
          }
        })
      },
      //自动化测试例专用
      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) => {
            this.jest_result = true
          },
          fail: (err : any) => {
            this.jest_result = false
          }
        } as CommonOptions)
        // #endif
      },
      jest_special_characters_download() {
        uni.downloadFile({
          url: "https://web-ext-storage.dcloud.net.cn/hello-uni-app-x/1789834995055525889-你好%23你好.png",
          success: (res : DownloadFileSuccess) => {
            this.jest_result = true;
          },
          fail: () => {
            this.jest_result = false;
          }
        });
      }
    }
  }
</script>

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