以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组件上传文件

http://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);

});

}

第三种

就是用用up6控件,此控件支持mac、windos、Linux,因为太长就不发了,详细可以参考这篇文章:http://blog.ncmem.com/wordpress/2019/08/09/asp-net%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd/

asp.net大文件断点续传的更多相关文章

  1. B/S大文件断点续传

    一. 功能性需求与非功能性需求 要求操作便利,一次选择多个文件和文件夹进行上传:支持PC端全平台操作系统,Windows,Linux,Mac 支持文件和文件夹的批量下载,断点续传.刷新页面后继续传输. ...

  2. iOS开发之网络编程--使用NSURLConnection实现大文件断点续传下载+使用输出流代替文件句柄

    前言:本篇讲解,在前篇iOS开发之网络编程--使用NSURLConnection实现大文件断点续传下载的基础上,使用输出流代替文件句柄实现大文件断点续传.    在实际开发中,输入输出流用的比较少,但 ...

  3. 使用NeatUpload控件实现ASP.NET大文件上传

    使用NeatUpload控件实现ASP.NET大文件上传 一般10M以下的文件上传通过设置Web.Config,再用VS自带的FileUpload控件就可以了,但是如果要上传100M甚至1G的文件就不 ...

  4. php实现大文件断点续传下载实例

    php实现大文件断点续传下载实例,看完你就知道超过100M以上的大文件如何断点传输了,这个功能还是比较经典实用的,毕竟大文件上传功能经常用得到. require_once('download.clas ...

  5. HTML5 大文件断点续传完整思路整理

    需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...

  6. asp.net解决大文件断点续传

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  7. asp.net大文件分块上传断点续传demo

    IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头. 一. 两个必要响应头Accept-Ranges.ETag 客户端每次提交下载请求时,服务 ...

  8. C# Asp.NET实现上传大文件(断点续传)

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API ,包括文件的上传和下载. 准备文件上传的API #region 文件上传  ...

  9. ASP.NET 大文件上传的简单处理

    在 ASP.NET 开发的过程中,文件上传往往使用自带的 FileUpload 控件,可是用过的人都知道,这个控件的局限性十分大,最大的问题就在于上传大文件时让开发者尤为的头疼,而且,上传时无法方便的 ...

随机推荐

  1. js面向对象程序设计之继承

    在面向对象语言中继承分成两种:接口继承和实现继承.解释一下,接口继承只继承方法的签名,而实现继承则是继承实际的方法.但是ECMAScript中的函数没有签名所以无法进行接口继承,只能是实现实现继承.而 ...

  2. leveldb memtable

    memtable常驻于内存,需要按照key进行排序,通常意义上的话,可以使用二叉查找树来实现,跟进一步可以使用红黑树保证树的平衡,但是leveldb中使用了另外的一种数据结构:跳表Skip List. ...

  3. Spring Boot & Restful API 构建实战!

    作者:liuxiaopeng https://www.cnblogs.com/paddix/p/8215245.html 在现在的开发流程中,为了最大程度实现前后端的分离,通常后端接口只提供数据接口, ...

  4. 五分钟搞懂 Linux 重点知识,傻瓜都能学会!

    来源:无痴迷,不成功 www.cnblogs.com/justmine/p/9053419.html 写在前面 我们都知道Linux是一个支持多用户.多任务的系统,这也是它最优秀的特性,即可能同时有很 ...

  5. BZOJ 1100 &&luogu 3454(计算几何+KMP)

    题面 给定一个多边形,求对称轴数量. 分析 初看这似乎是一道计算几何的题目,但是如果暴力枚举对称轴,再去判断对称轴两边的边和角是否相等,时间复杂度为\(O(n^2)\),显然会TLE 问题转换 顺时针 ...

  6. Acwing‘803. 区间合并

    (https://www.acwing.com/problem/content/805/) 给定 nn 个区间 [li,ri][li,ri],要求合并所有有交集的区间. 注意如果在端点处相交,也算有交 ...

  7. 七层模型? IP ,TCP/UDP ,HTTP ,RTSP ,FTP 分别在哪层?

    IP: 网络层TCP/UDP: 传输层HTTP.RTSP.FTP: 应用层协议

  8. DAG

    DAG的生成 DAG(Directed Acyclic Graph) 叫做有向无环图,原始的RDD通过一系列的转换就形成了DAG,根据RDD之间的依赖关系的不同将DAG划分成不同的Stage,对于窄依 ...

  9. org.hibernate.hql.ast.QuerySyntaxException: tb_voteoption is not mapped [from tb_voteoption where voteID=?]

    转自:https://www.cnblogs.com/albert1017/archive/2012/08/25/2656873.html org.hibernate.hql.ast.QuerySyn ...

  10. a标签实现下载canvas图片

    令 a 的 href = canvas.toDataURL("image/png");