【快应用】重新打开快应用, 保存/上传的图片资源不显示

现象描述

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

 

问题分析

此问题是由于将图片的路径保存在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区,只要不清除该快应用的数据,即便退出应用,再次打开也可访问到。代码示例如下:

Hello.ux

<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>

app.ux

<script>

  import storage from '@system.storage'

  import prompt from '@system.prompt'

  module.exports = {

    data: {

      storageMass: "",

      storageTemp: ""

    },

    onCreate() {

      console.info('Application onCreate');

    },

    onShow: function () {

      this.getMassStorage()

      this.getTempStorage()

    },

    getTempStorage: function () {

      var that = this

      storage.get({

        key: "tempSrc",

        default: 'default value',

        success: function (ret) {

          console.info('storage.get(): ', JSON.stringify(ret))

          that.storageTemp = ret

          console.log(that.storageTemp);

          prompt.showToast({

            message: 'value: ' + ret,

          })

        },

        fail: function (erromsg, errocode) {

          prompt.showToast({ message: 'get fail --- ' + errocode + ':' + erromsg })

          console.info('get fail --- ' + errocode + ':' + erromsg)

        },

        complete: function () {

          console.info('get complete  ')

        }

      })

    }, 

    getMassStorage: function () {

      var that = this

      storage.get({

        key: "massSrc",

        default: 'default value',

        success: function (ret) {

          console.info('storage.get(): ', JSON.stringify(ret))

          that.storageMass = ret

          console.log(that.storageMass);

          prompt.showToast({

            message: 'value: ' + ret,

          })

        },

        fail: function (erromsg, errocode) {

          prompt.showToast({ message: 'get fail --- ' + errocode + ':' + erromsg })

          console.info('get fail --- ' + errocode + ':' + erromsg)

        },

        complete: function () {

          console.info('get complete  ')

        }

      })

    }

 

  }

</script>

 欲了解更多更全技术文章,欢迎访问https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

{{o.name}}
{{m.name}}

猜你喜欢

转载自my.oschina.net/u/4478396/blog/5610275