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>
  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://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://web-assets.dcloud.net.cn/unidoc/zh/uni-app.png",
          success: () => {
            this.jest_result = true
          },
          fail: () => {
            this.jest_result = false
          }
        });
      }
    }
  }
</script>

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