#region 文件上傳 可以帶參數(shù)

  [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

<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>

<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">上傳到服務(wù)器</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>

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));

  }

downloadRequest() { 

 let url = "Home/downloadRequest"; //可以在路徑中傳遞參數(shù)

 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); //關(guān)鍵語句

  }

<el-button type="primary" v-on:click="downloadRequest1">下載文件11</el-button>

...

...

...

 downloadRequest1() {

  axios({

  // 用axios發(fā)送post請求

  method: "post",

  url: "Home/downloadRequest1", // 請求地址 ，也可以傳遞參數(shù)

  headers: {

   //可以自定義header

   gggg: "gggggggggggggggggggggggggggggggggggggggggggggggggggg" //可以攜帶token

  },

  responseType: "blob" // 表明返回服務(wù)器返回的數(shù)據(jù)類型

  }).then(res => {

  // 處理返回的文件流

  //主要是將返回的data數(shù)據(jù)通過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);

  });

 }