c#.net中實現檔案上傳下載的三種解決方案(推薦)
以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,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,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,因為太長就不發了,詳細可以參考這篇文章:http://blog.ncmem.com/wordpress/2019/08/09/asp-net%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0%e4%b8%8b%e8%bd%bd/
歡迎入群一起討論:374992201