download-file.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-padding-wrap uni-common-mt">
        <view v-if="imageSrc" class="image-container">
          <image class="img" :src="imageSrc" mode="center" />
        </view>
        <view v-else style="margin-top: 50px">
          <text class="uni-hello-text">点击按钮下载服务端示例图片（下载网络文件到本地临时目录）</text>
          <view class="uni-btn-v">
            <button type="primary" @tap="downloadImage">下载</button>
          </view>
        </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)
            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 {
    width: 500rpx;
    height: 500rpx;
    margin: 0 auto;
  }

  .image-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>