準備文件上傳的API


#region 文件上傳 可以帶參" />

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

 更新時間:2020-01-15 16:00:31   作者:佚名   我要評論(0)

以ASP.NET Core WebAPI 作后端 API ,用 Vue 構建前端頁面,用 Axios 從前端訪問后端 API ,包括文件的上傳和下載。
準備文件上傳的API


#region 文件上傳 可以帶參

以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 + [email protected]"\{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);

  });

 }

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

您可能感興趣的文章:

  • asp.net大文件上傳解決方案實例代碼
  • ASP.NET實現大文件上傳功能
  • Asp.Net超大文件上傳問題解決
  • asp.net neatUpload 支持大文件上傳組件
  • asp.net 大文件上傳控件

相關文章

  • asp.net大文件上傳解決方案實例代碼

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

    以ASP.NET Core WebAPI 作后端 API ,用 Vue 構建前端頁面,用 Axios 從前端訪問后端 API ,包括文件的上傳和下載。 準備文件上傳的API #region 文件上傳 可以帶參
    2020-01-15
  • .Net Core讀取Json配置文件的實現示例

    .Net Core讀取Json配置文件的實現示例

    前言:在與傳統的asp.net MVC項目相比,.net core項目在項目目錄的文件結構上和功能上與前者都有很大的區別。例如:在.net core中使用Startup.cs取代Global.asax文件
    2020-01-15
  • .net core部署到windows服務上的完整步驟

    .net core部署到windows服務上的完整步驟

    前言 Net core 項目部門在Windows有很多種方式,大致有以下幾種, dotnet 命令, iis(windowshosts), 一些開源的應用容器(docker ) 基于一些exe 程
    2020-01-15
  • .NET Core 微信小程序退款步驟——(統一退款)

    .NET Core 微信小程序退款步驟——(統一退款)

    繼上一篇".NET Core 微信小程序支付——(統一下單)后",本文將實現統一退款功能,能支付就應該能退款嘛,一般涉及到錢的東西都會比較敏感,所以在設計退款流程時一
    2020-01-15
  • .NET core 3.0如何使用Jwt保護api詳解

    .NET core 3.0如何使用Jwt保護api詳解

    摘要: 本文演示如何向有效用戶提供jwt,以及如何在webapi中使用該token通過JwtBearerMiddleware中間件對用戶進行身份認證。 認證和授權區別? 首先我們要弄清楚認證
    2020-01-15
  • .Net Core下HTTP請求IHttpClientFactory示例詳解

    .Net Core下HTTP請求IHttpClientFactory示例詳解

    使用方式 IHttpClientFactory有四種模式: 基本用法 命名客戶端 類型化客戶端 生成的客戶端 基本用法 在 Startup.ConfigureServices 方法中,通過在
    2020-01-15
  • .net core webapi通過中間件獲取請求和響應內容的方法

    .net core webapi通過中間件獲取請求和響應內容的方法

    本文主要根據中間件來實現對.net core webapi中產生的請求和響應數據進行獲取并存入日志文件中; 這里不詳細介紹日志文件的使用。你可以自己接入NLog,log4net,Exce
    2020-01-15
  • VS2019以及MFC的安裝詳細教程

    VS2019以及MFC的安裝詳細教程

    本文為大家分享了VS2019以及MFC的安裝詳細教程,供大家參考,具體內容如下 一、安裝過程: 1、搜索visual studio 進入官網。 2、選擇community 2019下載。 3、現在
    2020-01-15
  • asp.net core razor自定義taghelper的方法

    asp.net core razor自定義taghelper的方法

    又一個新的名詞(taghelper),通過taghelper是可以操作html標簽、條件輸出、更是自由添加內外元素。當然也內置了挺多的asp-開頭的taghelper。 下面文章中也簡單的帶大
    2020-01-15
  • NET Core 3.0 AutoFac內置DI替換的新姿勢分享

    NET Core 3.0 AutoFac內置DI替換的新姿勢分享

    .NET Core 3.0 和 以往版本不同,替換AutoFac服務的方式有了一定的變化,在嘗試著升級項目的時候出現了一些問題。 原來在NET Core 2.1時候,AutoFac返回一個 IServi
    2020-01-15

最新評論

老快3投注技巧