欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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大文件上传解决方案,大家可以测试下,感谢大家对的支持。