现象描述
将上传的图片或者保存在手机本地的图片在快应用中显示出来，但是退出快应用后再次打开会无法显示.
问题分析
此问题是由于将图片的路径保存在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}}