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这个对象是只读属性,所以不能修改
求大神怎么办?或者有没有更好的方法
??失败的时候把src改回原值就可以了,改file是做什么?