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

最新推荐文章于 2025-02-02 11:50:57 发布

原创

最新推荐文章于 2025-02-02 11:50:57 发布 · 6.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js axios post #图片实时显示

本文介绍了在Vue.js应用中如何利用axios进行POST请求上传头像或图片，并实现实时显示在页面上。通过在methods中定义函数，并在mounted钩子中调用，确保图片预览功能在组件挂载后生效。代码示例包括HTML和JS部分，实现了图片上传和预览的功能。

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

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代码：

//实时显示该图片在页面
 great(){
          document.getElementById('saveImage').onchange = function () {
          var imgFile = this.files[0];
          var fr = new FileReader();
          fr.onload = function () {