​

以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，因為太長就不發了，詳細可以參考這篇文章：asp.net檔案上傳下載 – 澤優軟體部落格

歡迎入群一起討論：374992201

​