以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>
?
?
?上傳</button>
</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>
?class="upload-css"
?:file-list="uploadFiles"
?ref="upload"
?:on-success="upLoadSuccess"
?:on-error="upLoadError"
?:action="uploadURL"
?:auto-upload="false">
?選取文件</el-button>
?上傳到服務器</el-button>
</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，因為太長就不發了，詳細源碼可以直接網上搜索“up6”
討論群：374992201
