<div class="file-box">
          <input type="button" class="btn" value="选择文件" />
          <input
            type="file"
            class="file"
            id="upimg"
            @change="previewFiles"
            multiple
          />
        </div>
  <!-- Vue就直接用@change="previewFiles"读取文件回调 --!>

// vue读取
function previewFiles(e){
	console.log(e.target.files)
}
 
// 原生监听
var upimg = document.getElementById('upimg');

upimg.addEventListener('change', function(e){
	        // 多文件
           console.log(e.target.files)
           // 单文件
           // console.log(e.target.files[0])
    }, false);

.btn,
.file {
   // display: block;
  position: absolute;
  width: 75px;
  height: 35px;
  color: #fff;
  border-radius: 4px;
  border-color: #409eff;
}

.btn {
  z-index: 2;
  background: #409eff;  /*  #66b1ff    409eff */
  pointer-events: none; /* 让事件传递到下一层,即: btn的层级比file高,但btn能触发file的事件 */
}
.file {
  z-index: 1;
}

用button覆盖input,也就是buttton的z-index层级比input高,最重要的一步是给button添加"pointer-events: none;" 属性, 把事件传递到下一层,即button可以触发input的事件