asp.net大文件上传解决方案实例代码
更新时间：2019年09月11日 14:19:20 作者：松鼠的博客
在本篇文章里小编给大家整理的是关于asp.net大文件上传解决方案以及相关实例代码，有需要的朋友们学习下。
以ASP.NET Core WebAPI 作后端 API ，用 Vue 构建前端页面，用 Axios 从前端访问后端 API ,包括文件的上传和下载。
准备文件上传的API
#region 文件上传 可以带参数
[HttpPost(“upload”)]
public JsonResult uploadProject(IFormFile file, string userId)
{
if (file != null)
{
var fileDir = “D:\\\\aaa”;
if (!Directory.Exists(fileDir))
{
Directory.CreateDirectory(fileDir);
}
//文件名称
string projectFileName = file.FileName;
//上传的文件的路径
string filePath = fileDir + $@”\\{projectFileName}”;
using (FileStream fs = System.IO.File.Create(filePath))
{
file.CopyTo(fs);
fs.Flush();
}
return Json(“ok”);
}else{
return Json(“no”);
}
}
#endregion
前端vue上传组件 ( 利用Form表单上传 )
<template>
<div>
<form>
<input type=”text” value=”” v-model=”projectName” placeholder=”请输入项目名称”>
<input type=”file” v-on:change=”getFile($event)”>
<button v-on:click=”submitForm($event)”>上传</button>
</form>
</div>
</template>
<script>
///这个组件是用于上传bdls文件的组件
export default {
data() {
return {
uploadURL: “/Home/Upload”,
projectName: “”,
file: “”
};
},
methods: {
getFile(event) {
this.file = event.target.files[0];
console.log(this.file);
},
submitForm(event) {
event.preventDefault();
let formData = new FormData();
formData.append(“file”, this.file);
let config = {
headers: {
“Content-Type”: “multipart/form-data”
}
};
this.$http
.post(this.uploadURL, formData, config)
.then(function(response) {
if (response.status === 200) {
console.log(response.data);
}
});
}
}
};
</script>
<style lang=”scss” scoped>
</style>
用 element-ui 的 Upload组件上传文件
element-cn.eleme.io/#/zh-CN/component/upload
<template>
<div>
<el-upload
class=”upload-css”
:file-list=”uploadFiles”
ref=”upload”
:on-success=”upLoadSuccess”
:on-error=”upLoadError”
:action=”uploadURL”
:auto-upload=”false”>
<el-button slot=”trigger” size=”small” type=”primary”>选取文件</el-button>
<el-button style=”margin-left: 10px;” size=”small” type=”success” @click=”submitUpload”>上传到服务器</el-button>
</el-upload>
</div>
</template>
<script>
import Vue from “vue”;
import { Upload, Button } from “element-ui”;
Vue.use(Upload);
Vue.use(Button);
export default {
props: [],
data() {
return {
projectName: “”,
//uploadURL: “/project/upload?a=1”,
uploadFiles: [] //上传的文件列表
};
},
computed: {
//文件的上传路径
//附带用户id和项目名称
uploadURL: function() {
//var userId = this.$store.state.userId;
return “/project/upload?userId=” + 1;
}
},
methods: {
//文件上传
submitUpload() {
this.$refs.upload.submit();
},
//文件上传成功时的钩子
upLoadSuccess(response, file, fileList) {
if (response == “ok”) {
console.log(response + “已上传” + file);
console.log(“项目添加成功”);
} else {
console.log(“项目添加失败”);
}
},
//文件上传失败时的钩子
upLoadError(response, file, fileList) {
console.log(“项目添加失败”);
}
}
};
</script>
<style lang=”scss” scoped>
</style>
文件下载
普通的文件下载方式是访问一个后台文件流地址，直接生成对应的文件，下载即可，地址栏中也可携带一些控制参数，但是无法通过header传递参数。
两种文件下载方式，一种是，直接返回file文件，利用浏览器的下载功能。但是这种没有发现可以在发送请求的时候携带token；另一种是利用 Axios 发送下载文件的请求，可以设置header头，可以携带token ，但是response-type是blob类型的。
第一种：
后端API:
public FileResult downloadRequest()
{
//var addrUrl = webRootPath + “/upload/thumb.jpg”;
var addrUrl = “D:/aaa/thumb.jpg”;
var stream = System.IO.File.OpenRead(addrUrl);
string fileExt = Path.GetExtension(“thumb.jpg”);
//获取文件的ContentType
var provider = new FileExtensionContentTypeProvider();
var memi = provider.Mappings[fileExt];
return File(stream, memi, Path.GetFileName(addrUrl));
}
前端利用浏览器的功能url直接返回文件
下载文件…
downloadRequest() {
let url = “Home/downloadRequest”; //可以在路径中传递参数
window.location.href = url;
},
第二种
后端api ,两个api的返回类型不同，asp.net core 文件下载常用的有FileResult 、FileContentResult 、 FileStreamResult。
public FileContentResult downloadRequest1()
{
//string webRootPath = _hostingEnvironment.WebRootPath;
//var addrUrl = webRootPath + “/upload/thumb.jpg”;
var addrUrl = “D:/aaa/wyy.exe”;
/*var stream = System.IO.File.OpenRead(addrUrl);
string fileExt = Path.GetExtension(“thumb.jpg”);
//获取文件的ContentType
var provider = new FileExtensionContentTypeProvider();
var memi = provider.Mappings[fileExt];
return File(stream, memi, Path.GetFileName(addrUrl));*/
//return stream;
byte[] fileBytes = System.IO.File.ReadAllBytes(addrUrl);
string fileName = “wyy.exe”;
return File(fileBytes, System.Net.Mime.MediaTypeNames.Application.Octet, fileName); //关键语句
}
前端页面
blob(用来存储二进制大文件)
<el-button type=”primary” v-on:click=”downloadRequest1″>下载文件11</el-button>
…
…
…
downloadRequest1() {
axios({
// 用axios发送post请求
method: “post”,
url: “Home/downloadRequest1”, // 请求地址 ，也可以传递参数
headers: {
//可以自定义header
gggg: “gggggggggggggggggggggggggggggggggggggggggggggggggggg” //可以携带token
},
responseType: “blob” // 表明返回服务器返回的数据类型
}).then(res => {
// 处理返回的文件流
//主要是将返回的data数据通过blob保存成文件
var content = res.data;
var blob = new Blob([content]);
var fileName = “wyy.exe”; //要保存的文件名称
if (“download” in document.createElement(“a”)) {
// 非IE下载
var elink = document.createElement(“a”);
elink.download = fileName;
elink.style.display = “none”;
elink.href = URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
URL.revokeObjectURL(elink.href); // 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
console.log(res);
});
}
上面就是两种最好用的asp.net大文件上传解决方案，大家可以测试下，感谢大家对华域联盟的支持。
您可能感兴趣的文章:ASP.NET 上传文件导入Excel的示例asp.net core webapi文件上传功能的实现ASP.NET Core单文件和多文件上传并保存到服务端的方法asp.net利用ashx文件实现文件的上传功能asp.net上传Excel文件并读取数据的实现方法ASP.NET MVC实现批量文件上传ASP.NET Core文件上传与下载实例(多种上传方式)解决asp.net上传文件超过了最大请求长度的问题ASP.NET MVC HttpPostedFileBase文件上传的实例代码ASP.NET 上传文件到共享文件夹的示例
asp.net
大文件上传
相关文章
2个页面间不通过Session与url的传值方式2个页面间不通过Session与url的传值方式… 2006-09-09
Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块完美中午的时候发了第一篇 Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块，发现实现上还是有问题，本文将提供详细的完美方案 2012-11-11
Silverlight融合ajax实现前后台数据交互两年前Silverlight 还未起名，故事发生在WPF/E 的年代里。07年8月在中软实习时，我承担起了在. Net 中嵌入WPF/E 的任务，目的是增强用户体验。 2009-05-05
ASP.NET Core中如何利用Csp标头对抗Xss攻击这篇文章主要给大家介绍了关于ASP.NET Core中如何利用Csp标头对抗Xss攻击的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用ASP.NET Core具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧 2019-09-09
集合类Array List HashTable实例操作练习集合常用操作添加、遍历、移除;本文将详细介绍下ArrayList对值类型的操作/ArrayList对引用类型的操作及HashTable的使用，感兴趣的你可不要错过了哈 2013-02-02
axp.net ScriptManager的简单用法scriptManager的结构,参数，属性说明 2008-11-11
合并两个DataSet的数据内容的方法合并两个DataSet的数据内容的方法，需要的朋友可以参考一下 2013-03-03
获取asp.net服务器控件的客户端ID和Name的实现方法下面小编就为大家带来一篇获取asp.net服务器控件的客户端ID和Name的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2016-05-05
C#反射的一些应用初始听说反射是可以动态的调用程序集，并从中来获取相应的方法和属性，感觉比较神奇，，， 2013-02-02
asp.net 上传图片并同时生成缩略图的代码asp.net 上传图片并同时生成缩略图的代码，需要的朋友可以参考下。 2010-02-02
最新评论
评论(0)