原生文件上传

vue + 原生上传文件

 <div>
          <span>2、请先上传文件：{{ this.uploadFileName }}</span>
          <span>
            <input
              type="file"
              ref="fileInput"
              :style="{ display: 'none' }"
              id="fileChoseInBI"
              @change="choseFileInBI($event)"
              accept=".xls, .xlsx"
            />
            <a-button @click="choseImgInBI" style="margin-left: 10px">上传</a-button>
          </span>
        </div>


//js部分
 //点击上传按钮
    choseImgInBI() {
      var fileSelect = document.getElementById("fileChoseInBI");
      fileSelect.click();
    },
    
  //获取文件url
    choseFileInBI(e) {
      // 通过DOM取文件数据
      var el = e.target;
      console.log('通过DOM取文件数据',el);
      this.uploadFileName = el.files[0].name; //所选文件名字
      this.fileFile = el.files[0]; //文件file  传给后端的文件流
      el.value = ""; //每次选择后清空value  不然第二次从选择相同文件存在选不上的情况
    },