以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);
});
}
上面就是两种最好用的asp.net大文件上传解决方案，大家可以测试下，感谢大家对www.887551.com的支持。
黄山市民网：https://www.huangshanshimin.com/
