javascript图片上传预览

Question

在用VUX需要用到上传头像但好像没有这个功能，在外面搜了一圈都没找到合适的，干脆用原生写一个图片上传并预览，图片是能上传的，但是预览出现问题，上代码

    <script type="text/javascript">

    var $file = document.getElementById('file')
 
    var img = document.getElementById('file-img')

    function readFile(){
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            img.attr('src', this.result)
                    
    }
}
   $file.onchange(readFile)
</script>

Answer 1

为什么用原生js又要掺杂jq写法？

    var $file = document.getElementById('file')
    console.log($file)

    var img = document.getElementById('file-img')
    console.log(img)

    function readFile(){
        var file = this.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            img.src= this.result;
                    
    }
}
   $file.onchange=readFile;

另外 URL.createObjectURL也可以获得预览路径

    var $file = document.getElementById('file');
    console.log($file)

    var img = document.getElementById('file-img');
    console.log(img)

    function readFile(){
        var file = this.files[0];
     var imgsrc = URL.createObjectURL(file);
     img.src = imgsrc;
}
   $file.onchange=readFile;

Answer 2

$file.addEventListener('change', readFile, false)
或者
$file.onchange = readFile

Answer 3

既然用vux了为何又要用那么频繁的dom操作，个人觉得预览界面做个模态框既可，js触发起开关