<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 });
}