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

B/S结构下上传下载大文件(1G以上)的解决方案的更多相关文章

  1. django上传下载大文件

    上传 def upFile(file): upload_dir = '/tmp/upload/%s' % username if request.method == 'POST': upload_fi ...

  2. datasnap 上传/下载大文件(本Demo以图传片文件为例)

    好久没写技术文了 datasnap传大流. 完整代码,同时感谢叶兄传流的指点,(只公开十天) 附:下面代码,转载请注明出处 ::code 服务端: function TServerMethods1.D ...

  3. Xshell5下利用sftp上传下载传输文件

    sftp是Secure File Transfer Protocol的缩写,安全文件传送协议.可以为传输文件提供一种安全的加密方法.sftp 与 ftp 有着几乎一样的语法和功能.SFTP 为 SSH ...

  4. SpringMVC文件上传下载(单文件、多文件)

    前言 大家好,我是bigsai,今天我们学习Springmvc的文件上传下载. 文件上传和下载是互联网web应用非常重要的组成部分,它是信息交互传输的重要渠道之一.你可能经常在网页上传下载文件,你可能 ...

  5. Linux 下上传下载命令,SCP,SFTP,FTP

    scp 帮助命令: man scp scp功能: 下载远程文件或者目录到本地, 如果想上传或者想下载目录,最好的办法是采用tar压缩一下,是最明智的选择. 从远程主机 下载东西到 本地电脑 拷贝文件命 ...

  6. ASP.NET 使用ajaxfileupload.js插件出现上传较大文件失败的解决方法(ajaxfileupload.js第一弹)

    在写这篇的时候本来想把标题直接写成报错的提示,如下: “SecurityError:Blocked a frame with origin "http://localhost:55080&q ...

  7. php+html5实现无刷新上传,大文件分片上传,断点续传

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

  8. Spring Boot2(十四):单文件上传/下载,文件批量上传

    文件上传和下载在项目中经常用到,这里主要学习SpringBoot完成单个文件上传/下载,批量文件上传的场景应用.结合mysql数据库.jpa数据层操作.thymeleaf页面模板. 一.准备 添加ma ...

  9. 使用ftp软件上传下载php文件时换行丢失bug

    正 文:   在使用ftp软件上传下载php源文件时,我们偶尔会发现在本地windows下notepad++编辑器写好的php文件,在使用ftp上传到linux服务器后,php文件的换行符全部丢失了, ...

随机推荐

  1. HDU 1260 Tickets (动态规划)

    Tickets Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Sub ...

  2. springboot整合springdatajpa时jar冲突

    1.springboot整合springdatajpa测试时报No bean named 'entityManagerFactory' available错误 2.运行springboot主程序时报以 ...

  3. springmvc的MultipartFile参数如果不上传文件报错的问题

    @RequestMapping(value = "/updateInformation",method = RequestMethod.POST) @ResponseBody pu ...

  4. js设计模式--发布订阅模式

    前言 本系列文章主要根据<JavaScript设计模式与开发实践>整理而来,其中会加入了一些自己的思考.希望对大家有所帮助. 概念 发布-订阅模式又叫观察者模式,它定义对象间的一种一对多的 ...

  5. 剑指Offer 1-41 代码(python实现)

    今天主要写了一下offer 1-41题,余下的稍后整理 1 """ 1 镜像二叉树: 递归 """ def mirror(root): if ...

  6. shell脚本 自启动tomcat,nginx

    分为2步走 1. 脚本文件 : /usr/local 2. crontab -e : /5 * * * /bin/sh /usr/local/restart.sh 注意事项:可能用户权限会影响脚本的部 ...

  7. 小知识 Sql 格式化工具 AutoPostBack后的定位 Post和Get区别 防止被 Fream

    T-Sql 格式化工具 http://jinzb.name/Common/SqlFormat.html AutoPostBack后的定位问题: 给Page 增加属性,MaintainScrollPos ...

  8. 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚本。

    今天使用npm安装插件时出现了以下错误: 经查,原因:现用执行策略是 Restricted(默认设置) 解决办法: 1.win+X键,使用管理员身份运行power shell 2.输入命令:set-e ...

  9. 【原创】大叔经验分享(55)spark连接kudu报错

    spark-2.4.2kudu-1.7.0 开始尝试 1)自己手工将jar加到classpath spark-2.4.2-bin-hadoop2.6+kudu-spark2_2.11-1.7.0-cd ...

  10. python词云生成-wordcloud库

    python词云生成-wordcloud库 全文转载于'https://www.cnblogs.com/nickchen121/p/11208274.html#autoid-0-0-0' 一.word ...