使用接口传数据时img可以使用base64转码后传给后台，文笔不行直接上代码和效果图

         没查资料不知道什么版本可行可不行

看效果图

<input type="file" onchange="getimgs()"   name="" id="gfile" style="" />

    <script>
    var getimgs = function(){
        let file = document.querySelector('#gfile').files[0];
            let reader = new FileReader();
            let imgFile;
            console.log(file)
            if(file!=undefined&&file.type==="image/jpeg"){
                reader.readAsDataURL(file);
                reader.onload = ( e )=>{
                    imgFile = e.target.result;
                    let arr = imgFile.split(",");
                    // arr[1] 就是图片的 Base64编码字符串
                    console.log(arr[1].length); 
                    // 前缀“data:image/png;base64,”对此有疑问的可以去文章底部链接了解
                    let base64 = `data:image/png;base64,${arr[1]}`;
                    console.log(base64)
                }
            }
        }
    </script>

这个写完后就能看到,arr[1]就是转base64后的图片。看图

 但是这样不太美观，那我们可以这样玩，再给加一个img图片用来预览。

不多说上代码。

<img id="fileimg" onclick="onclickshowfile()" style="width:50px;height:50px;" src="#" alt="" />
<input type="file" onchange="getimgs()"   name="" id="gfile" style="display: none;" />

 <script>
    // 点击图片后给出发file按钮的点击事件来选择图片
     var onclickshowfile=function(){
        document.querySelector('#gfile').click()
    }
    var getimgs = function(){
        let file = document.querySelector('#gfile').files[0];
            let reader = new FileReader();
            let imgFile;
            if(file!=undefined&&file.type==="image/jpeg"){
                reader.readAsDataURL(file);
                reader.onload = ( e )=>{
                    imgFile = e.target.result;
                    let arr = imgFile.split(",");
                    // arr[1] 就是图片的 Base64编码字符串
                    // 前缀“data:image/png;base64,”对此有疑问的可以去文章底部链接了解
                    let base64 = `data:image/png;base64,${arr[1]}`;
                    console.log(base64)
                    // 将图片src地址换成转码后来预览
                    document.querySelector('#fileimg').src = `${base64}`;
                }
            }
        }
    </script>

然后当你弄完后会发现变成这样

真不错，完活。

阿对，还有使用vue的就更简单了，看代码

<img id="fileimg" @click="onshowfile" style="width:50px;height:50px;" src="#" alt="">
<input type="file" @change="getimgs(this)"  name="" id="gfile" style="display:none" />

 methods:{
        onshowfile(){
            document.querySelector('#gfile').click();
        },
        getimgs(){
            let file = document.querySelector('#gfile').files[0];
            let reader = new FileReader();
            let imgFile;
            if(file!=undefined&&file.type==="image/jpeg"){
                reader.readAsDataURL(file);
                reader.onload = ( e )=>{
                    imgFile = e.target.result;
                    let arr = imgFile.split(",");
                    // arr[1] 就是图片的 Base64编码字符串
                    // 前缀“data:image/png;base64,”对此有疑问的可以去文章底部链接了解
                    let base64 = `data:image/png;base64,${arr[1]}`;
                    document.querySelector('#fileimg').src = base64;
                }
            }
        },
}

好了好了，基础操作就这么些，有空了就在发设置图片大小和格式的要求。拜拜！~

注：对base64前缀好奇或想了解的话参考。【象在舞】的这篇文章：HTML中img标签base64显示图片