以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/

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

  1. js解决大文件断点续传

    最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现. 在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表 ...

  2. php解决大文件断点续传

    核心原理: 该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开 ...

  3. jsp解决大文件断点续传

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

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

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

  5. vue解决大文件断点续传

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  6. HTML5解决大文件断点续传

    一.概述 所谓断点续传,其实只是指下载,也就是要从文件已经下载的地方开始继续下载.在以前版本的HTTP协议是不支持断点的,HTTP/1.1开始就支持了.一般断点下载时才用到Range和Content- ...

  7. webuploader解决大文件断点续传

    文件夹数据库处理逻辑 public class DbFolder { JSONObject root; public DbFolder() { this.root = new JSONObject() ...

  8. java解决大文件断点续传

    第一点:Java代码实现文件上传 FormFile file = manform.getFile(); String newfileName = null; String newpathname =  ...

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

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

随机推荐

  1. java枚举enum总结大全

    1.注意点 (1)枚举中的构造方法必须是private的. (2)枚举中可以定义抽象方法和一般方法,但枚举对象必须实现所有抽象方法. (3)枚举对象必须放在第一行. package classTwo0 ...

  2. Oracle数据库 常用的触发器命令

    创建自增序列,创建触发器(在触发时间中操纵序列,实现主键自增): Oracle数据库不支持自增方法 create sequence seq_userInfo_usid start with ;--创建 ...

  3. highcharts离线导出图表

    到了这里,其实还没有结束,导出图片时,仍会发出两个请求 此时找到offline-exporting.js文件修改其中的libURL 修改为请求自己的网站

  4. dataGridView读写文本

    constant con = new constant(); private void loadlistbox2() { dataGridView1.ColumnCount = 1; string z ...

  5. 重新学习Spring一--Spring在web项目中的启动过程

    1 Spring 在web项目中的启动过程 Spring简介 Spring 最简单的功能就是创建对象和管理这些对象间的依赖关系,实现高内聚.低耦合.(高内聚:相关性很强的代码组成,既单一责任原则:低耦 ...

  6. JS中的if语句内如何加or使多个条件通过

    if(a==1&&b==2){ //do something }//条件是a等于1  并且  b等于2时才能成立,两个条件必须同时满足 if(a==1||b==2){ //do som ...

  7. Java实现树的遍历以及打印(递归,非递归)

    import java.util.LinkedList; import java.util.Stack; public class BinarySearchTree1<E extends Com ...

  8. springmvc框架helloword

    spring框架提供了构建web的应用程序的全功能MVC模块-spring mvc.我们首先来写一个springmvc的hellword的配置文件的形式 工程结构如下 index.jsp <%@ ...

  9. 【面试突击】- 2019年125条常见的java面试笔试题汇总(二)

    26.什么时候用assert. assertion(断言)在软件开发中是一种常用的调试方式,很多开发语言中都支持这种机制.在实现中,assertion就是在程序中的一条语句,它对一个boolean表达 ...

  10. swiper-动态更改数据后轮播点击或拖动失效

    出现的问题: 1.swiper不能自动切换(设置了autoplay). 2.数据不匹配(需要加载的数据以改变,但是swiper里面的数据出现错误). 3.数据匹配过后,永远切换不到第一条数据. 4.根 ...