百度上传下载组件源码
  9m65el8SCpbP 2023年11月02日 26 0


 以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);
      });
    }

第三种

就是用用up6控件,此控件支持mac、windos、Linux,因为太长就不发了

百度上传下载组件源码_上传

百度上传下载组件源码_源码编译_02编辑

百度上传下载组件源码_上传_03

百度上传下载组件源码_源码编译_02编辑

百度上传下载组件源码_源码编译_05

百度上传下载组件源码_源码编译_02编辑

百度上传下载组件源码_源码编译_07

百度上传下载组件源码_源码编译_02编辑

 

视频演示:

 

windows控件安装,,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS测试,asp.net-阿里云(oss)测试,asp.net-华为云(obs)测试,jsp-springboot测试,ActiveX(x86)源码编译,ActiveX(x64)源码编译,Windows(npapi)源码编译,macOS源码编译,Linux(x86_64)源码编译,Linux(arm)源码编译,Linux(mips-uos)源码编译,Linux(mips-kylin-涉密环境)源码编译,sm4加密传输,压缩传输,

示例下载地址

源代码文档

asp.net源码下载jsp-springboot源码下载jsp-eclipse源码下载jsp-myeclipse源码下载php源码下载csharp-winform源码下载vue-cli源码下载c++源码下载


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  KObryig2cZt5   2023年12月22日   107   0   0 上传JavaJava上传
9m65el8SCpbP