**input=file上传文件用div替换上传按钮及获取文件信息**

小程序、前端交流群：609690978

<div class="box">
  <div class="blank">{{ fileName }}</div>
  <div class="uploadBtn" @click="choiceFile">点击上传</div>
  <input id="file" ref="file" type="file" name="file" @change="getFile()"/>
</div>

// scss写法
.box {
 width: 48%;
 height: 40px;
 display: flex;
 align-items: center;
 justify-content: space-between;
 .blank {
   width: 66%;
   height: 40px;
   background: #EEEDEB;
   padding: 0 20px;
   text-align: left;
   line-height: 40px;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
 }
 .uploadBtn {
   width: 32%;
   height: 30px;
   cursor: pointer;
   border: 1px solid #000;
   font-size: 12px;
   line-height: 30px;
   text-align: center;
  }
  #file[type=file] {
    display: none;
  }
}

choiceFile() {
  this.$refs.file.dispatchEvent(new MouseEvent('click'))
},
getFile() {
  // 获取文件对象
  let resultFile = this.$refs.file.files[0]
  // 获取文件名、类型和大小
  const { name, type, size } = resultFile
  this.fileName = name
  // 获取文件内容
  let reader = new FileReader()
  reader.readAsDataURL(resultFile)
  reader.onload = function () {
   const arr = [
    {
      Name: name,
      ContentType: type,
      Body: this.result
     }
   ]
   console.log(arr, size)
  }
}

小程序、前端交流群：609690978

最后

以上就是无限皮卡丘为你收集整理的**input=file上传文件用div替换上传按钮及获取文件信息**的全部内容，希望文章能够帮你解决**input=file上传文件用div替换上传按钮及获取文件信息**所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。