HarmonyOS鸿蒙Next中【快应用】重新打开快应用，保存/上传的图片资源不显示

HarmonyOS鸿蒙Next中【快应用】重新打开快应用，保存/上传的图片资源不显示 现象描述

将上传的图片或者保存在手机本地的图片在快应用中显示出来，但是退出快应用后再次打开会无法显示。

问题分析

此问题是由于将图片的路径保存在Temp区（表示从外部映射过来的临时文件，出于安全性考虑，临时文件是只读的，并且只能通过调用特定的API获取，比如media.pickVideo方法。另外临时文件的访问是临时的，应用重启后无法访问到临时文件，需要通过特定API重新获取。）导致的，代码示例如下：

temp() {
    console.info("temp function");
    var that = this
    media.pickFile({
        success: function(data) {
            console.log("handling success: " + data.uri)
            that.tempSrc = data.uri
            //数据存储
            storage.set({
                key: "tempSrc",
                value: that.tempSrc,
                success: function(ret) {
                    prompt.showToast({
                        message: '{key:' + "tempSrc" + ',value:' + that.tempSrc + '}',
                    })
                },
                fail: function(erromsg, errocode) {
                    prompt.showToast({ message: 'set fail --- ' + errocode + ':' + erromsg })
                    console.info('set fail --- ' + errocode + ':' + erromsg)
                },
                complete: function() {
                    prompt.showToast({ message: 'set complete' })
                    console.info('set complete  ')
                }
            })
        },
        fail: function(data, code) {
            console.log("handling fail, code=" + code)
        }
    })
},

解决方法

通过file.copy将图片的路径放在Mass区，只要不清除该快应用的数据，即便退出应用，再次打开也可访问到。代码示例如下：

<template>
  <div class="container">
    <div class="page-title-wrap">
      <text class="page-title">mass or other</text>
    </div>
    <image class="image" src="{{tempSrc}}"></image>
    <div class="item-container">
      <input type="button" class="btn" onclick="temp" value="temp"/>
    </div>
    <image class="image" src="{{massSrc}}"></image>
    <div class="item-container">
      <input type="button" class="btn" onclick="mass" value="mass"/>
    </div>
  </div>
</template>

<style>
  .container {
    flex: 1;
    flex-direction: column;
  }
  .page-title-wrap {
    padding-top: 50px;
    padding-bottom: 80px;
    justify-content: center;
  }
  .page-title {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 40px;
    padding-right: 40px;
    border-color: #bbbbbb;
    color: #bbbbbb;
    border-bottom-width: 2px;
  }
  .item-container {
    margin-top: 50px;
    margin-right: 60px;
    margin-left: 60px;
    flex-direction: column;
  }
  .btn {
    height: 80px;
    text-align: center;
    border-radius: 5px;
    margin-right: 60px;
    margin-left: 60px;
    color: #ffffff;
    font-size: 30px;
    background-color: #0faeff;
  }
  .image {
    width: 400px;
    height: 400px;
    margin-top: 30px;
  }
</style>

<script>
  import file from '@system.file'
  import media from '@system.media'
  import storage from '@system.storage'
  import prompt from '@system.prompt'
  export default {
    data: {
      tempSrc: "",
      massSrc: "",
    },
    onShow: function() {
      this.massSrc = this.$app.$def.storageMass
      this.tempSrc = this.$app.$def.storageTemp
    },
    temp() {
      console.info("temp function");
      var that = this
      media.pickFile({
        success: function(data) {
          console.log("handling success: " + data.uri)
          that.tempSrc = data.uri
          //数据存储
          storage.set({
            key: "tempSrc",
            value: that.tempSrc,
            success: function(ret) {
              prompt.showToast({
                message: '{key:' + "tempSrc" + ',value:' + that.tempSrc + '}',
              })
            },
            fail: function(erromsg, errocode) {
              prompt.showToast({ message: 'set fail --- ' + errocode + ':' + erromsg })
              console.info('set fail --- ' + errocode + ':' + erromsg)
            },
            complete: function() {
              prompt.showToast({ message: 'set complete' })
              console.info('set complete  ')
            }
          })
        },
        fail: function(data, code) {
          console.log("handling fail, code=" + code)
        }
      })
    },
    mass() {
      console.info("mass function");
      var that = this
      media.pickFile({
        success: function(data) {
          console.log("handling success: " + data.uri)
          that.massSrc = data.uri
          //把图片路径从temp区复制到mass区
          file.copy({
            srcUri: that.massSrc,
            dstUri: "internal://mass/path/to/file" + new Date().getTime(),
            success: function(uri) {
              console.log("copy success: " + uri);
              that.massSrc = uri
              //数据存储
              storage.set({
                key: "massSrc",
                value: that.massSrc,
                success: function(ret) {
                  prompt.showToast({
                    message: '{key:' + "massSrc" + ',value:' + that.massSrc + '}',
                  })
                  console.log('{key:' + "massSrc" + ',value:' + that.massSrc + '}');
                },
                fail: function(erromsg, errocode) {
                  prompt.showToast({ message: 'set fail --- ' + errocode + ':' + erromsg })
                  console.info('set fail --- ' + errocode + ':' + erromsg)
                },
                complete: function() {
                  prompt.showToast({ message: 'set complete' })
                  console.info('set complete  ')
                }
              })
            },
            fail: function(data, code) {
              console.log("handling fail, code=" + code);
            }
          })
        },
        fail: function(data, code) {
          console.log("handling fail, code=" + code)
        }
      })
    },
  }
</script>