我的Vue组件如下:
<template>
<section>
...
<img class="media-object" :src="baseUrl+'/storage/banner/thumb/'+photo" alt="" width="64" height="64">
...
</section>
</template>
<script>
export default {
props: ['banners'],
data() {
return {
baseUrl: App.baseUrl,
bannerId: this.banners.id,
photo: this.banners.photo // result : chelsea.png
}
},
methods: {
onFileChange(e) {
let files = e.target.files,
reader = new FileReader(),
formData = new FormData(),
self = this
formData.append('file', files[0])
formData.append('banner_id', this.bannerId)
axios.post(window.App.baseUrl+'/admin/banner/upload-image',
formData,
{
headers: {
'Content-Type': 'multipart/form-data'
}
}
).then(function(response) {
if(response.data.status == 'success') {
self.photo = response.data.fileName // result : chelsea.png
}
})
.catch(function(error) {
console.log('FAILURE!!')
})
},
...
}
}
</script>
< p >:src的结果为:\ my-app \ storage \ app \ public \ banner \ thumb \ chelsea.png < /p>
< p >当我上传图片时,它会调用onFileChange方法。上传过程将在后端继续进行。它成功地上传到文件夹中。响应将返回相同的文件名。因此,response.data.fileName的结果是chelsea.png。
我的问题是:上传图片后它不会自动更新图片。当我刷新页面时,图片才被更新。
为什么我上传图片后图片不会自动更新/更改?