<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ElementUIupload.aspx.cs" Inherits="WebApplication1.test.ElementUIupload" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>导入</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="myUpload">
<el-button type="primary" size="mini" @click="uploadFile">导入</el-button>
<!--上传-->
<el-dialog title="上传" width="40%" :visible.sync="uploadTemplateDialog">
<el-row>
<el-col :span="22">
<el-upload class="upload-demo"
ref="upload"
action=""
:accept="acceptFileType"
:limit="1"
:on-exceed="handleExceed"
:before-upload="beforeUpload"
:on-preview="handlePreview"
:on-remove="handleRemove"
:file-list="fileList"
:auto-upload="false">
<el-button slot="trigger" size="small" type="primary">选取Excel格式文件</el-button>
<div slot="tip" class="el-upload_tip">只能上传.xls文件,且不超过1M</div>
</el-upload>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="submitUpload" type="primary" size="mini" :loading="uploadLoading" > 确定上传</el-button>
<el-button @click="uploadTemplateDialog=false" size="mini">取消</el-button>
</span>
</el-dialog>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://unpkg.com/element-ui@2.6.1/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script >
new Vue({
el:'#myUpload',
data:function(){
return{
uploadTemplateDialog:false,
fileList:[],
uploadLoading:false,
acceptFileType:'.xls',
downLoadLoading:'',
}
},
//钩子函数,页面加载执行
created:function(){
},
//钩子函数,页面加载完成后执行
mounted(){
},
//函数方法
methods:{
uploadFile(){
this.uploadLoading=false;
var that=this;
this.fileList=[];
this.uploadTemplateDialog=true;
setTimeout(function(){
that.$refs.upload.clearFiles();
},100);
},
handleExceed(files,fileList){
this.$message.warning('只能选择1个文件!');
},
submitUpload(){
this.uploadLoading=true;
var that=this;
setTimeout(function () {
if(that.$refs.upload.$children[0].fileList.length==1){
that.$refs.upload.submit();
}else{
that.uploadLoading=false;
that.$message({
type:'error',
showClose:true,
duration:3000,
message:'请选择文件!'
});
};
},100);
},
handleRemove(file,fileList){
//console.log(file,fileList);
},
handlePreview(file){
//console.log(file);
},
beforeUpload(file){
var that=this;
//文件类型
var fileName=file.name.substring(file.name.lastIndexOf('.')+1);
if(fileName!='xls'){
that.uploadTemplateDialog=false;
that.$message({
type:'error',
showClose:true,
duration:3000,
message:'文件类型不是.xls文件!'
});
return false;
}
//读取文件大小
var fileSize=file.size;
console.log(fileSize);
if(fileSize>1048576){
that.uploadTemplateDialog=false;
that.$message({
type:'error',
showClose:true,
duration:3000,
message:'文件大于1M!'
});
return false;
}
that.downloadLoading=that.$loading({
lock:true,
text:'数据导入中...',
spinner:'el-icon-loading',
background:'rgba(0,0,0,0.7)'
});
let fd=new FormData();
fd.append('file',file);
fd.append('_t1',new Date());
axios({
method:'post',
url:'/Handler/Handler1.ashx',
data:fd,
headers:{"Content-Type":"multipart/form-data;boundary="+new Date().getTime()}
}).then(rsp=>{
that.downloadLoading.close();
that.uploadLoading=false;
let resp=rsp.data
if(resp.resultCode==200){
that.uploadTemplateDialog=false;
that.$message.success(resp.resultMsg);
//that.queryData();//更新数据
}else{
that.uploadTemplateDialog=false;
that.$message({
type:'error',
showClose:true,
duration:60000,
message:resp.resultMsg
});
}
}).catch(error=> {
that.downloadLoading.close();
that.uploadLoading=false;
that.uploadTemplateDialog=false;
that.$message({
type:'error',
showClose:true,
duration:60000,
message:'请求失败! error:'+error
});
})
return false;
}
}
})
</script>
</body>
</html>
后台代码
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.IO;
using System.Text;
namespace WebApplication1.Handler
{
/// <summary>
/// Handler1 的摘要说明
/// </summary>
public class Handler1 : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
HttpPostedFile uploadfile = context.Request.Files["file"];
if (uploadfile == null)
{
context.Response.Write("no:非法上传");
return;
}
if (uploadfile.FileName == "")
{
context.Response.Write("no:请选择文件");
return;
}
string fileExt = Path.GetExtension(uploadfile.FileName);
StringBuilder sbtime = new StringBuilder();
sbtime.Append(DateTime.Now.Year).Append(DateTime.Now.Month).Append(DateTime.Now.Day).Append(DateTime.Now.Hour).Append(DateTime.Now.Minute).Append(DateTime.Now.Second);
string dir = "/UploadFile/" + sbtime.ToString() + fileExt;
string realfilepath = context.Request.MapPath(dir);
string readDir = Path.GetDirectoryName(realfilepath);
if (!Directory.Exists(readDir))
Directory.CreateDirectory(readDir);
uploadfile.SaveAs(realfilepath);
//context.Response.Write("ok");
//string name = context.Request["username"].ToString();
//context.Response.Write(name);
}
public bool IsReusable
{
get
{
return false;
}
}
}
}