以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/
歡迎入群一起討論：374992201