以ASP.NET Core WebAPI 作后端 API ，用 Vue 構建前端頁面，用 Axios 從前端訪問后端 API ,包括文件的上傳和下載。
準備文件上傳的API
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
|
#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表單上傳 )
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
|
<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
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
|
<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:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
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直接返回文件
下載文件...
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
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(用來存儲二進制大文件)
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
|
<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大文件上傳解決方案，大家可以測試下，感謝大家對服務器之家的支持。
原文鏈接：https://www.cnblogs.com/songsu/p/11505536.html
