解决同样文件不能上传第二次问题

解决同样文件不能上传第二次问题

背景：上传头像（图片）时，第二次上传同样的图片，不会改变的问题
解决方案：将上传的路径/文件 清除
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来使用。您的图像文件不能够超过浏览器限定的大小，否则无法读取图像文件。