vue前端图片上传、回显图片

<label>文件:</label>
<input type="file" @change="selectFile($event)"/>
<button type="button" @click="upfile($event)">上传</button>
<div>
    <img :src="'upfiles/'+filename" />
</div>

<script src="js/axios.min.js"></script>
    <script src="js/vue.js"></script>
    <script>
        const vm = new Vue({
            el:"#app",
            data:{
                file:null,
                filename:"shangchuang.png"
            },
            methods: {
                selectFile(event){
                    console.log(event);
                    this.file = event.target.files[0];
                },
                upfile(event){
                    let formdata = new FormData();
                    formdata.append("file",this.file);
                    axios.post("http://localhost:8080/upfile/photo",formdata,{
                        "Content-type":"multipart/form-data"
                    }).then((res)=>{
                        console.log(res.data);
                        this.filename = res.data;
                    });
                }
            },
        })
    </script>