首页 > 其他分享 >VUE实现文件上传下载功能实例解析

VUE实现文件上传下载功能实例解析

时间:2023-04-23 17:36:12浏览次数:53  
标签:文件 VUE 请求 上传下载 响应 实例 源码 下载 客户端

IE的自带下载功能中没有断点续传功能,要实现断点续传功能,需要用到HTTP协议中鲜为人知的几个响应头和请求头。

 

一. 两个必要响应头Accept-Ranges、ETag

        客户端每次提交下载请求时,服务端都要添加这两个响应头,以保证客户端和服务端将此下载识别为可以断点续传的下载:

Accept-Ranges:告知下载客户端这是一个可以恢复续传的下载,存放本次下载的开始字节位置、文件的字节大小;

ETag:保存文件的唯一标识(我在用的文件名+文件最后修改时间,以便续传请求时对文件进行验证);

Last-Modified:可选响应头,存放服务端文件的最后修改时间,用于验证

 

二. 一个重要请求头Range

Range:首次下载时,Range头为null,此时服务端的响应头中必须添加响应头Accept-Ranges、ETag;

              续传请求时,其值表示客户端已经收到的字节数,即本次下载的开始字节位置,服务端依据这个 值从相应位置读取数据发送到客户端。

 

三. 用于验证的请求头If-Range、

       当响应头中包含有Accept-Ranges、ETag时,续传请求时,将包含这些请求头:

If-Range:对应响应头ETag的值;

Unless-Modified-Since:对应响应头Last-Modified的值。

        续传请求时,为了保证客户端与服务端的文件的一致性和正确性,有必要对文件进行验证,验证需要自己写验证代码,就根据解析这两个请求头的值,将客户端已下载的部分与服务端的文件进行对比,如果不吻合,则从头开始下载,如果吻合,则断点续传。

 

四.  速度限制

        程序中加入了速度限制,用于对客户端进行权限控制的流量限制。

 

五. 其它注意事项

      如:文件名乱码的问题、文件名中空格变加号、强制客户端显示下载对话框等,详见源码注释:

  1

  2        /// <summary>

  3        /// 下载文件,支持大文件、续传、速度限制。支持续传的响应头Accept-Ranges、ETag,请求头Range 。

  4        /// Accept-Ranges:响应头,向客户端指明,此进程支持可恢复下载.实现后台智能传输服务(BITS),值为:bytes;

  5        /// ETag:响应头,用于对客户端的初始(200)响应,以及来自客户端的恢复请求,

  6        /// 必须为每个文件提供一个唯一的ETag值(可由文件名和文件最后被修改的日期组成),这使客户端软件能够验证它们已经下载的字节块是否仍然是最新的。

  7        /// Range:续传的起始位置,即已经下载到客户端的字节数,值如:bytes=1474560- 。

  8        /// 另外:UrlEncode编码后会把文件名中的空格转换中+(+转换为%2b),但是浏览器是不能理解加号为空格的,所以在浏览器下载得到的文件,空格就变成了加号;

  9        /// 解决办法:UrlEncode 之后, 将 "+" 替换成 "%20",因为浏览器将%20转换为空格

 10        /// </summary>

 11        /// <param name="httpContext">当前请求的HttpContext</param>

 12        /// <param name="filePath">下载文件的物理路径,含路径、文件名</param>

 13        /// <param name="speed">下载速度:每秒允许下载的字节数</param>

 14        /// <returns>true下载成功,false下载失败</returns>

 15        public static bool DownloadFile(HttpContext httpContext, string filePath, long speed)

 16        {

 17            bool ret = true;

 18            try

 19            {

 20                --验证:HttpMethod,请求的文件是否存在

 36

 37                定义局部变量

 49

 50                --验证:文件是否太大,是否是续传,且在上次被请求的日期之后是否被修改过--------------

 67

 68                try

 69                {

 70                    -------添加重要响应头、解析请求头、相关验证-------------------

 97

 98                    -------向客户端发送数据块-------------------

108                }

109                catch

110                {

111                    ret = false;

112                }

113                finally

114                {

115                    br.Close();

116                    myFile.Close();

117                }

118            }

119            catch

120            {

121                ret = false;

122            }

123            return ret;

124        }

上传展示截图:

 

示例下载地址

源代码文档

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

详细配置信息及思路

 

标签:文件,VUE,请求,上传下载,响应,实例,源码,下载,客户端
From: https://www.cnblogs.com/songsu/p/17347163.html

相关文章

  • ai问答:使用 Vue3 组合式API 和 TypeScript 封装 echarts 折线图
    <template><divref="chart"style="height:500px;"></div></template><scriptlang="ts">import{ref,onMounted,watch}from'vue'import*asechartsfrom'echarts'e......
  • 基于SpringBoot+Vue的音乐网站
    本次项目是基于SpringBoot+Vue的前后端分离项目,旨在熟练相关框架,掌握相关技术,拓展个人知识面。音乐来源:本地用户页面:Web项目亮点:根据歌词、音乐旋律、定位时间线(老师的意见)确定好方向,开始项目、收集资料、准备相关的开发环境和软件等。了解项目的结构与逻辑,确定基本功能,需求......
  • Rollup failed to resolve import "vue-demi" from
    1、背景:vue3+vite+ts的一个项目打包的时候报错了2、报错截图 3、引入截图 4、修改引入vue-demi->vue5、结果可以正常打包啦~~ ......
  • Vue 项目安全扫描漏洞,JS 库版本太低,要求升级 YUI(vue2 升级javascript库)【检测到目标站
    原帖:https://blog.csdn.net/u012961419/article/details/130016341背景公司信安部门对项目进行安全扫描,查出一些漏洞,其中有一项要求升级javascript框架库(如图): 吓得我以为让我把Vue2升级成Vue3。经过一番询问后才知道,是工具包中依赖的YUI是存在安全漏洞的版本。漏洞定......
  • jQuery Ajax 实例 详细介绍$.ajax、$.post、$.get的使用
    Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦需要处理浏览器之间的兼容问题,Jquery大大简化了我们的这些操作操作,不用在考虑浏览器这方面的问题,可以直接使用!$.post、$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一、$.ajax的一般格式$.ajax({......
  • Java__SpringBoot与Vue连接
    SpringBoot与Vue注解RequestMapping("/dir/")创建一个方便前端调用的接口目录/接口函数,前端可以获取到函数返回的数据@RestController@RequestMapping("/dir/")publicclassBotInfoController{@RequestMapping("getinfo/")publicMap<String,String>GetI......
  • 原型模式:通过复制生成实例
    原型模式允许对象在不重新创建的情况下通过复制来生成新的实例。这通常比直接创建一个新对象更加高效。简单来说,原型模式就是通过复制一个已有的对象来创建新的对象。首先,我们需要定义一个实现Cloneable接口的原型类,以便使用clone()方法进行复制:publicclassPrototypeimplemen......
  • Vue的学习笔记(下篇)
    一、什么是Vue.js?Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页......
  • Vue的学习笔记(中篇)
    一、什么是Vue.js?Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页......
  • HTML5实现文件上传下载功能实例解析
    ​ 以ASP.NETCoreWebAPI 作后端 API ,用 Vue 构建前端页面,用 Axios 从前端访问后端 API,包括文件的上传和下载。 准备文件上传的API #region 文件上传  可以带参数        [HttpPost("upload")]        publicJsonResultuploadProject(I......