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组件上传⽂件
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 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 core ⽂件下载常⽤的有FileResult 、FileContentResult 、 FileStreamResult。
public FileContentResult downloadRequest1()
{
//string webRootPath = _hostingEnvironment.WebRootPath;