上传图片预览

html

        <input type="file" onchange="change(this)">

js

        const body = document.body

        function show(src) {
            const img = new Image()
            img.onload = function () {
                body.append(img)
            }
            img.src = src
        }

        /**
         * @description: 预览的两种方案
         * @description: 1、通过FileReader实例的readAsDataURL方法 把File或者Blob对象读成DataURL（也就是base64）
         * @description: 2、通过URL的静态方法readAsDataURL方法 把File或者Blob对象读成ObjectURL（图片的地址）
         * @param {type} file 
         * @return: 
         */
        function getSrc(file) {
            // const reader = new FileReader()
            // reader.onload = function () {
            //     show(this.result)
            // }
            // reader.readAsDataURL(file)
            const objURL = URL.createObjectURL(file)
            show(objURL)
        }

        function change(target) {
            const file = target.files[0]
            getSrc(file)
        }