用csharp 實(shí)現(xiàn)斷點(diǎn)續(xù)傳 (HTTP)
以ASP.NET Core WebAPI?作后端?API?，用?Vue?構(gòu)建前端頁面，用?Axios?從前端訪問后端?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 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 scoped>
</style>
文件下載
普通的文件下載方式是訪問一個(gè)后臺(tái)文件流地址，直接生成對(duì)應(yīng)的文件，下載即可，地址欄中也可攜帶一些控制參數(shù)，但是無法通過header傳遞參數(shù)。
?
兩種文件下載方式，一種是，直接返回file文件，利用瀏覽器的下載功能。但是這種沒有發(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)鍵語句
????????}
前端頁面
?
blob(用來存儲(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ù)通過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);
??????});
????}
第三種
就是用用up6控件，此控件支持mac、windos、Linux，因?yàn)樘L就不發(fā)了，示例下載地址：
鏈接：https://www.dianjilingqu.com/612132.html
