记录--js上传图片转base64并浏览_js将图片的base64用浏览器打开-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_41611635/article/details/100774648

本文介绍了一种使用原生HTML输入元素实现文件上传的方法，重点解决了element上传组件的问题，通过自定义样式和JavaScript处理实现了对上传文件大小的限制及预览功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

因为使用element的上传存在一点问题，直接改用原始的上传方式

                <div id="prompt3">
                    <span id="imgSpan">
                        <i class="el-icon-plus"></i>
                    </span>
                    <input type="file" id="file" class="filepath" @change="handleOnChange" accept="image/jpg,image/jpeg,image/png,image/PNG">
                </div>

js：

            var file = document.getElementById('file').files[0];
            const isLt2M = file.size / 1024 / 1024 < 2
            if (!isLt2M) {
                this.error0('上传图片大小不能超过 2MB!')
            } else {
                let _this = this
                // if (!file || !window.FileReader) return // 看支持不支持FileReader
                let reader = new FileReader()
                reader.readAsDataURL(file) // 这里是最关键的一步，转换就在这里
                reader.onloadend = function() {
                    _this.photo = this.result
                }
            }

css：
使用opacity:0隐藏掉input，给span设置样式，设置相对定位不会覆盖掉input

            #prompt3 {
                width: 150px;
                height: 175px;
                border: 1px dashed #d9d9d9;
            }
            input {
                width: 150px;
                height: 175px;
                opacity: 0;
            }
            #imgSpan {
                display: flex;
                width: 150px;
                height: 175px;
                position: absolute;
                justify-content: center;
                align-items: center;
                .el-icon-plus {
                    font-size: 30px;
                    color: #8c939d;
                }
            }

显示效果：
在这里插入图片描述