Vue上传图片并实时显示

<div class="line-two" :style="driver ? 'display: none': ''">
    <div class="line-two-one"
        <div class="showImgContent">
            <img :src="imgSrc" alt="">
        </div>
        <input type="file" title="请选择图片" @change="imgChange">
    </div>
    <div class="posts-text">
        <textarea v-model="textArea" placeholder="优美的文案" rows="4" cols="83"></textarea>            
    </div>
    <div class="sendPosts">
    <button @click="addNewPostss">发布</button>
    </div>
</div>

 

            let formData = new FormData()
            let textArea = ref()

            const imgSrc = ref()
            const imgChange = (e) => {
                /*console.log(e.target.files);*/
                let fr = new FileReader()
                fr.onload =  function() {
                    /*console.log("fr.result",fr.result);*/
                    imgSrc.value = fr.result
                    /*console.log(imgSrc.value);*/
                }
                fr.readAsDataURL(e.target.files[0]);

                Array.from(e.target.files).map(item => {
                    formData.append("file", item)
                })
                console.log("formData.getAll", formData.getAll("file"));
            }