上传图片base64

最新推荐文章于 2023-06-28 17:41:35 发布

KeroroLX

最新推荐文章于 2023-06-28 17:41:35 发布

阅读量435

点赞数

分类专栏： js常用封装

本文链接：https://blog.csdn.net/github_38928905/article/details/81181647

版权

js常用封装专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 html

上传预览
<div class="imgInputBox">
    <input id='headFile' type="file" class='imgInputBox_imgInput' name='headFile' @change=' getObjectURL'>
    <img :src="imgBase64" class='imgInputBox_img' id='headIcon'  alt="">
</div>

2 css

/*图片上传按钮*/
        .imgInputBox{
            position: relative;
            overflow: hidden;
            height: 150px;
            width: 150px;
            background-color: #f7f7f7;
        }
        .imgInputBox .imgInputBox_imgInput{
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 3;
            filter:alpha(opacity=0);
            -moz-opacity:0;
            -khtml-opacity: 0;
            opacity: 0;
        }
        .imgInputBox .imgInputBox_img{
            display: block;
            width: 100%;
            height: 100%;
        }

3 js

getObjectURL(e){ 
          var file=e.target.files[0];
          var reader = new FileReader();
          reader.readAsDataURL(file);
          var _this=this;
          reader.onload = (function (file) {
            return function (e) {
              _this.imgBase64=reader.result;//图片base64数据
            };
          })(file)
        },