以ASP.NET Core WebAPI 作后端 API ，用 Vue 構(gòu)建前端頁(yè)面，用 Axios 從前端訪問(wèn)后端 API ,包括文件的上傳和下載。

準(zhǔn)備文件上傳的API

前端vue上傳組件 ( 利用Form表單上傳 )

<template><div>    <form>        <input type='text' value='' v-model='projectName' placeholder='請(qǐng)輸入項(xiàng)目名稱(chēng)'>        <input type='file' v-on:change='getFile($event)'>        <button v-on:click='submitForm($event)'>上傳</button>    </form></div></template><script>///這個(gè)組件是用于上傳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./#/zh-CN/component/upload

文件下載

普通的文件下載方式是訪問(wèn)一個(gè)后臺(tái)文件流地址，直接生成對(duì)應(yīng)的文件，下載即可，地址欄中也可攜帶一些控制參數(shù)，但是無(wú)法通過(guò)header傳遞參數(shù)。

兩種文件下載方式，一種是，直接返回file文件，利用瀏覽器的下載功能。但是這種沒(méi)有發(fā)現(xiàn)可以在發(fā)送請(qǐng)求的時(shí)候攜帶token；另一種是利用 Axios 發(fā)送下載文件的請(qǐng)求，可以設(shè)置header頭，可以攜帶token ，但是response-type是blob類(lèi)型的。

第一種：

后端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直接返回文件

第二種

后端api ,兩個(gè)api的返回類(lèi)型不同，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); //關(guān)鍵語(yǔ)句        }

前端頁(yè)面

blob(用來(lái)存儲(chǔ)二進(jìn)制大文件)