asp.net大文件上传解决方案实例代码
程序员文章站
2024-01-17 10:34:52
以asp.net core webapi 作后端 api ,用 vue 构建前端页面,用 axios 从前端访问后端 api ,包括文件的上传和下载。
准备文件上传的api...
以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); }); }
上面就是两种最好用的asp.net大文件上传解决方案,大家可以测试下,感谢大家对的支持。
下一篇: 数据库的三级模式和两级映射介绍