首页 > 编程语言 >JavaScript中实现文件上传下载的三种解决方案(推荐)

JavaScript中实现文件上传下载的三种解决方案(推荐)

时间:2023-05-22 16:23:13浏览次数:45  
标签:文件 解决方案 上传下载 JavaScript 源码 file var 上传 下载

 以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,因为太长就不发了

效果展示:

 

视频演示:

windows控件安装,,linux-deb控件包安装,linux-rpm控件包安装,php7测试,php5测试,vue-cli-测试,asp.net-IIS Express测试,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++源码下载

详细配置信息及思路

标签:文件,解决方案,上传下载,JavaScript,源码,file,var,上传,下载
From: https://www.cnblogs.com/songsu/p/17420935.html

相关文章

  • js中实现文件上传下载的三种解决方案(推荐)
    ​ IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。 一. 两个必要响应头Accept-Ranges、ETag        客户端每次提交下载请求时,服务端都要添加这两个响应头,以保证客户端和服务端将此下载识别为可以断点续......
  • 前端中实现文件上传下载的三种解决方案(推荐)
    ​ 对于大文件的处理,无论是用户端还是服务端,如果一次性进行读取发送、接收都是不可取,很容易导致内存问题。所以对于大文件上传,采用切块分段上传,从上传的效率来看,利用多线程并发上传能够达到最大效率。 本文是基于springboot+vue实现的文件上传,本文主要介绍服务端实现文件......
  • 网页中实现文件上传下载的三种解决方案(推荐)
    ​ 前言文件上传是一个老生常谈的话题了,在文件相对比较小的情况下,可以直接把文件转化为字节流上传到服务器,但在文件比较大的情况下,用普通的方式进行上传,这可不是一个好的办法,毕竟很少有人会忍受,当文件上传到一半中断后,继续上传却只能重头开始上传,这种让人不爽的体验。那有没有......
  • 【iOS开发】UIWebView调用JS点击事件(stringByEvaluatingJavaScriptFromString)
    一、场景描述产品需求是移动端app要调用h5页面,然后监听h5代码中的某个方法,最终执行h5中的具体代码。二、具体代码.m文件@interfaceViewController()<UIWebViewDelegate>@property(nonatomic,strong)UIWebView*webView;@end@implementationViewController-(void)viewDid......
  • 【iOS开发】一些常见的警告解决方案(更新中。。。)
    UnknownpatterncolorfortheBackgroundColorattribute1.背景色属性为未知模式的颜色解决:默认xib里面控件的背景色为Default。如果出现警告,可能是你定义的颜色Xcode启动时识别不了,请重新检查每个控件的背景色,在设置一下颜色就可以了。Unusedvariable‘temString’2.变量没有......
  • JavaScript在策划网站中的应用
    JavaScript在策划网站中有许多应用,以下是其中的一些:1. 表单验证:JavaScript可以用来验证用户提交的表单数据,例如验证邮箱格式、密码强度等,比如某某策划网站就是用的这样的代码。2. 动态效果:JavaScript可以用来实现网页上的动画效果和交互特效,例如轮播图、下拉菜单等。3. Ajax请......
  • 文件上传下载
    文件上传/***文件上传*@return*/@PostMapping(value="/upload")publicStringfileUpload(@RequestParamMultipartFilefile)throwsIOException{//获取源文件名StringoriginalFilename=file.getOriginalFilename();//获取文件类型Strin......
  • JavaScript学习笔记:模块
    前言在js编程中,模块指的是按照一定格式将代码以功能拆分后作为独立文件存在的一个实体。早期的JS并没有规定模块应该如何设计,核心语言也没有针对模块提供相关支持。早期的代码使用IIFE来实现一个模块,它是通过向全局对象添加属性来实现与其他模块来交互的。(function(){v......
  • [nodejs]国内npm安装nodejs modules失败的几个解决方案
    使用npm安装node模块时经常有卡住安装失败的情况,如图所示。原因在于npm服务器在美国,还有就是某强大的防火墙作用。这样的问题导致很多新手放弃使用node,几乎每天都有新手再问这个问题。现在分享一下解决这个问题的解决方案1.可以通过一劳永逸的方式修改代理地址2.更换npm源拼rp (......
  • JavaScript基础知识笔记
    JavaScript是属于Web的编程语言,对网页行为进行编程。参考教程:https://www.w3school.com.cn/js/index.asphttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Language_overviewJavaScript能够改变HTML内容document.getElementById("demo").innerHTML="Hell......