c# 大檔案分片上傳處理
以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 + $@"\{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);
});
}
第三種
就是用用up6控制元件，此控制元件支援mac、windos、Linux，因為太長就不發了
控制元件原始碼下載：
測試與配置：
效果展示：
檔案上傳
資料庫記錄
上傳到OSS的檔案
資料夾上傳
資料庫記錄
上傳到OSS的檔案