以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 scoped》
《/style》
用 element-ui 的 Upload组件上传文件
http://element-cn.eleme.io/#/zh-CN/component/upload
《template》
《div》
《el-upload
: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 scoped》
《/style》
文件下载
普通的文件下载方式是访问一个后台文件流地址,直接生成对应的文件,下载即可,地址栏中也可携带一些控制参数,但是无法通过header传递参数。
两种文件下载方式,一种是,直接返回file文件,利用浏览器的下载功能。但是这种没有发现可以在发送请求的时候携带token;另一种是利用 Axios 发送下载文件的请求,可以设置header头,可以携带token ,但是response-type是blob类型的。
以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 scoped》
《/style》
用 element-ui 的 Upload组件上传文件
http://element-cn.eleme.io/#/zh-CN/component/upload
《template》
《div》
《el-upload
: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 scoped》
《/style》
文件下载
普通的文件下载方式是访问一个后台文件流地址,直接生成对应的文件,下载即可,地址栏中也可携带一些控制参数,但是无法通过header传递参数。
两种文件下载方式,一种是,直接返回file文件,利用浏览器的下载功能。但是这种没有发现可以在发送请求的时候携带token;另一种是利用 Axios 发送下载文件的请求,可以设置header头,可以携带token ,但是response-type是blob类型的。
举报