input type="file"上传图片回滚

vue实现一个类似头像上传的功能,利用input type="file"实现,作用大概就是本地选择图片然后上传到服务器,上传失败回滚到之前的样子
html:

<form action="" enctype="multipart/form-data" method="post" name="form1" id="form1">
       文件:<input type="file" name="myFile" id="myFile" @change="getFileContent();">
</form>
    
<!-- 图片展示区域 -->
<div id="imgList" style="width: 100px;height:100px;">
    <img src="123.jpg" alt="" style="width:100%;height: 100%;">
</div>

</div>

js

 getFileContent(){
   var reader = new FileReader();
   var file = document.querySelector("#myFile").files;
   reader.readAsDataURL(file[0]);

   reader.onload = function(){
       let oimg = document.querySelector("img")
       oimg.src = reader.result;
       this.axios.post('xxx',{
            img:reader.result;
       })
       .then{...}
       .catch{
            // reset
            oimg.src = '123.jpg'
       }
   }
   
 }

因为file这个对象是只读属性,所以不能修改
求大神怎么办?或者有没有更好的方法

阅读 2.2k
1 个回答

??失败的时候把src改回原值就可以了,改file是做什么?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题