vue中使用axios post上传头像/图片并实时显示到页面

在前端开发中，为了更好的用户体验，在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法。

html代码：

 <div id="myPhoto" v-show="personalPhoto">
        <div class="viewPhoto">
          <img src="" alt="" id="portrait"style="width: 300px;height: 300px" />
        </div>
        <div class="listBox">
          <dl>
            <dt>请上传图片</dt>
            <dd>
              <input type="file"id="saveImage" name="myphoto" >
            </dd>
          </dl>
        </div>
        <div class="save">
          <input type="button"  value="保存图片" @click="imageSubmit">
        </div>
      </div>

js代码：

//实时显示该图