鸿蒙开发之图片下载

一、使用

  downloadSomething() {
    Prompt.showToast({message: '开始下载'})
    let downloadTask:request.DownloadTask
    let randName = Math.random()
    let filePath = getContext(this).tempDir+'/test'+randName+'.jpg'
    request.downloadFile(getContext(this),{
      url:'https://unsplash.com/photos/1PrQ2mHW-Fo/download?force=true',
      filePath:filePath
    },(err, data) => {
      if (err) {
        console.log('Failed to request the download. Cause: ' + JSON.stringify(err));
        return;
      }
      downloadTask = data;
        
     //进度回调
      let progresCallback = (receivedSize, totalSize) => {
        console.log("download image progress receivedSize:" + receivedSize + " totalSize:" + totalSize);
        this.message = '当前进度'+(receivedSize/totalSize*100).toFixed(2)+'%'
        if (receivedSize == totalSize) {
          Prompt.showToast({message: '下载完成'})
        }
      };
      downloadTask.on('progress', progresCallback);
    })
  }

二、下载进度回调

在下载的方法里，通过downloadFile拿到request.DownloadTask对象，然后通过on方法进行监听progress的回调，回调中有当前下载大小和整体资源大小，这里可以做一个进度提示。（我这里直接显示在按钮的标题中）

三、使用中遇到的坑

1、首先，downloadFile函数的第一个参数官网是用的globalThis.abilityContext，我直接在page页面模拟的所以直接通过this拿context即可。

2、其次，filePath是下载后的目的地址。API明明标明的是可选参数，而且官网例子也没写这个参数，但是模拟器跑的时候会报错filePath参数异常。

3、然后，filePath一定是唯一的，不然会直接崩溃。我这里直接用了一个随机数，实际中应该可以先检测是否有当前图片，没有再下载。

4、最后，downloadTask的on方法回调监听一定是在downloadFile方法回调内部使用的，官网没说明这点。

四、遗留的问题

我现在把图片下载到filePath的路径中了，但是，我怎么读取出来呢？

希望知道的大佬指点一下。

全部代码

import request from '@ohos.request'
import Prompt from '@system.prompt'
import image from '@ohos.multimedia.image'

@Entry
@Component
struct OfficialDownloadPage {
  @State message: string = '开始下载'
  @State imageUri: any = ''

  build() {
    Row() {
      Column() {
        Button(this.message)
          .type(ButtonType.Capsule)
          .fontSize(30)
          .fontWeight(FontWeight.Bold)
          .onClick(() => {
            this.downloadSomething()
          })

        Image(this.imageUri)
          .width(200)
          .height(200)
          .backgroundColor(Color.Brown)
      }
      .width('100%')
    }
    .height('100%')
  }

  downloadSomething() {
    Prompt.showToast({message: '开始下载'})
    let downloadTask:request.DownloadTask
    let randName = Math.random()
    let filePath = getContext(this).tempDir+'/test'+randName+'.jpg'
    request.downloadFile(getContext(this),{
      url:'https://unsplash.com/photos/1PrQ2mHW-Fo/download?force=true',
      filePath:filePath
    },(err, data) => {
      if (err) {
        console.log('Failed to request the download. Cause: ' + JSON.stringify(err));
        return;
      }
      downloadTask = data;

      //进度回调
      let progresCallback = (receivedSize, totalSize) => {
        console.log("download image progress receivedSize:" + receivedSize + " totalSize:" + totalSize);
        this.message = '当前进度'+(receivedSize/totalSize*100).toFixed(2)+'%'
        if (receivedSize == totalSize) {
          Prompt.showToast({message: '下载完成'})
          //这样不行，怎么读取filePath的图片呢???
          //this.imageUri = image.createImageSource(filePath)
          
        }
      };
      downloadTask.on('progress', progresCallback);
    })
  }
}