上传图片时如何在vue组件上自动更新图片？

Question

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

:src 的结果：\my-app\storage\app\public\banner\thumb\chelsea.png

当我上传图片时，它会调用 onFileChange 方法。并且进程上传将在后端继续。它成功上传到文件夹中。并且响应将返回相同的文件名。所以 response.data.fileName 的结果是 chelsea.png

我的问题是：当我上传图片时，它不会自动更新图片。当我刷新页面时，图像更新了

为什么上传图片时图片没有自动更新/更改？

原文由 moses toh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我通过执行以下操作修复了它，注意我在照片 url 的末尾添加了一个名为 rand 的变量以用于缓存清除。当您从服务器获得正确的响应时，只需将该变量更改为唯一的变量（在本例中为时间戳），瞧！你的形象会刷新。

 <template>
    <img class="media-object" :src="baseUrl+'/storage/banner/thumb/'+photo + '?rand=' + rand" alt="" width="64" height="64">
</template>
<script>
    export default {
        data() {
           return {
               rand: 1
           }
        },
        methods: {
            onFileChange(e) {
                ...
                axios.post(url,formData).then(function(response) {
                    if(response.data.status == 'success') {
                        self.rand = Date.now()
                    }
                })
            },
        ...
    }

    }

原文由 JoeGalind 发布，翻译遵循 CC BY-SA 4.0 许可协议