解决同样文件不能上传第二次问题
背景:上传头像(图片)时,第二次上传同样的图片,不会改变的问题
解决方案:将上传的路径/文件 清除
html:
<div id="app">
<input type='file' accept='image/*' id ='aa' @change='openFile'>
<img id='output' src="XXX">
</div>
js:
<script>
openFile: function(event) {
var reader = new FileReader();
var input = event.target;
var self = this;
reader.readAsDataURL(input.files[0]); //获取图片的base64码
reader.onloadend = function() { //图片加载完成后再执行函数
var dataURL = reader.result;
var output = document.getElementById('output');
output.src = dataURL; //或者 src = dataURL; (定义src值的情况下)
event.target.value = "" //将文件路径清空 赋值为null也行 文件路径为:C:\fakepath\文件名
};
</script>
当再次选择同样的图片时,会触发change事件。其实不是同样的图片或者文件,是同样名字的文件(图片);
其中 event.target和event.srcElement是同样的值,若是input框中有id的话,可以直接document.getElementById(‘aa’) = null
FileReader对象的readAsDataURL方法可以将读取到的文件编码成Data URL。Data URL是一项特殊的技术,可以将资料(例如图片)内嵌在网页之中,不用放到外部文件。使用Data URL的好处是,您不需要额外再发出一个HTTP 请求到服务器端取得额外的资料;而缺点便是,网页的大小可能会变大。它适合应用在内嵌小图片,不建议将大图像文件编码成Data URL来使用。您的图像文件不能够超过浏览器限定的大小,否则无法读取图像文件。