vue (不用el-upload) 原生html 上传upload Excel

<template>
  <el-dialog title="Import Excel" :before-close="onClickCancelHandler" :visible="visible">
    <form id="postForm" enctype="multipart/form-data" method="post">
      <label for="fileinp" class="btnClass">
          <input type="button" id="btn" multiple draggable="true" value="Click upload"><span id="text">Please upload excel files</span>
          <input type="file" id="fileinp" @change="setText">
          <i class="el-icon-upload"></i>
          <div class="el-upload__tip" slot="tip">You can only upload Excel files, and not more than 10M</div>
      </label>
      <div class="btnClass">
      <el-button @click="upload" type="primary" id='btnUpload'>upload</el-button>
      <el-button @click="onClickCancelHandler" type="primary">cancel</el-button>
      </div>
    </form>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      avatar: "aaaa",

      visible: true
    };
  },

  methods: {
    onClickCancelHandler() {
      this.$emit("closeUploadDailog");
    },
    setText(){
      $("#text").html($("#fileinp").val());
    },

    async upload(){
      const  url="/CApi/Upload/UploadFiles";
      var input = document.querySelector('input[type="file"]')

      var data = new FormData()
      for (const file of input.files) {
        data.append('files',file,file.name)
        console.log('file',file)
      }

      let res = await this.selm_fetch(url, {
        method: "POST",
        credentials: "include",
        // headers: {
        //   "Content-Type": "multipart/form-data"
        // },
        body:data
      });

      let resJson = await res.json();
    }
  }
};
</script>
<style>
label {
  position: relative;
}
#fileinp {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
#btn {
  margin-right: 5px;
}
#text {
  color: red;
}
#btn {
  padding: 5px 10px;
  background: #00b0f0;
  color: #fff;
  border: none;
  border-radius: 5px;
}
.btnClass{
  margin-bottom: 100px;
  margin-top: 500px;
}
</style>

 

 

 

 

public ActionResult UploadFiles()
        {
            var result =  false ;
            var fname = String.Empty;
            if (Request.Files != null && Request.Files.Count > 0)
            {
                //foreach(HttpPostedFileBase f in Request.Files)
                //{
                //    fname = $"/uploads/{DateTime.Now.Ticks}${f.FileName}";
                //    f.SaveAs(Server.MapPath($"~{fname}"));
                //}用foreach被坑 取到的是字符串 filename
                var file = Request.Files[0];

                if (file != null && file.ContentLength > 0)
                {
                    var fileName = Path.GetFileName(file.FileName);
                    var path = Path.Combine(Server.MapPath("~/uploads/"), fileName);
                    file.SaveAs(path);
                }
                result = true;
            }
            return Json(new ApiResult{action= result , data= fname });
        }