原生JS获取input上传的图片返回的地址

1. HTML文件

<li>
    <label for="uploadFile" class="upload-file">点击上传</label>
    <!-- 在CSS中将input隐藏，UI效果用label展示 -->
    <input type="file" name="upload_file" id="uploadFile" οnchange="uploadImg()" />
    <br>
    <!-- 没有上传的时候不显示 ,上传以后添加src-->
    <img id="showUploadFile" src="" class="picture" style="display:none;" >
</li>

2. 点击上传后，读取上传的文件

// 点击上传图片
function uploadImg(){
    let file = document.getElementById('uploadFile').files[0];
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = function(result){
        let showUploadFile = document.getElementById('showUploadFile');
        showUploadFile.src = result.target.result;
        showUploadFile.style.display ='inline-block'
    }
}

3. 样式文件CSS

.upload-file{
    width:80px;
    height:30px;
    line-height: 30px;
    text-align: center;
    margin:0;
    background-color: #000;
    color:#fff;
    border-radius: 3px;
    cursor: pointer;
}

.picture{
    width: 58px;
    height: 58px;
    border: 1px solid #ccc;
    margin-left:42px;
    margin-top:10px;
}

input[type=file] {
    display: none !important;
}