快捷導(dǎo)航

asp.net大文件上傳解決方案實(shí)例代碼

更新時(shí)間：2019年09月11日 14:19:20 作者：松鼠的博客

在本篇文章里小編給大家整理的是關(guān)于asp.net大文件上傳解決方案以及相關(guān)實(shí)例代碼，有需要的朋友們學(xué)習(xí)下。

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

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

#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

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

<template>

<div>

 <form>

  <input type="text" value="" v-model="projectName" placeholder="請(qǐng)輸入項(xià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.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">上傳到服務(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和項(xiàng)目名稱

 uploadURL: function() {

  //var userId = this.$store.state.userId;

  return "/project/upload?userId=" + 1;

 }

 },

 methods: {

 //文件上傳

 submitUpload() {

  this.$refs.upload.submit();

 },

 //文件上傳成功時(shí)的鉤子

 upLoadSuccess(response, file, fileList) {

  if (response == "ok") {

  console.log(response + "已上傳" + file);

  console.log("項(xiàng)目添加成功");

  } else {

  console.log("項(xiàng)目添加失敗");

  }

 },

 //文件上傳失敗時(shí)的鉤子

 upLoadError(response, file, fileList) {

  console.log("項(xiàng)目添加失敗");

 }

 }

};

</script>

 

<style lang="scss" scoped>

</style>

文件下載

普通的文件下載方式是訪問(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類型的。

第一種：

后端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"; //可以在路徑中傳遞參數(shù)

 window.location.href = url;

 },

第二種

后端api ,兩個(gè)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)鍵語(yǔ)句

  }

前端頁(yè)面

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

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

...

...

...

 downloadRequest1() {

  axios({

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

  method: "post",

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

  headers: {

   //可以自定義header

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

  },

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

  }).then(res => {

  // 處理返回的文件流

  //主要是將返回的data數(shù)據(jù)通過(guò)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 對(duì)象

   document.body.removeChild(elink);

  } else {

   // IE10+下載

   navigator.msSaveBlob(blob, fileName);

  }

  console.log(res);

  });

 }

上面就是兩種最好用的asp.net大文件上傳解決方案，大家可以測(cè)試下，感謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: