JavaScript前端判断文件是否存在(案例详解)

简介: 分享工作的真实业务场景以及问题解决方案!
【辰兮要努力】:hello你好我是辰兮,很高兴你能来阅读,昵称是希望自己能不断精进,向着优秀程序员前行!

博客来源于项目以及编程中遇到的问题总结,偶尔会有读书分享,我会陆续更新Java前端、后台、数据库、项目案例等相关知识点总结,感谢你的阅读和关注,希望我的博客能帮助到更多的人,分享获取新知,大家一起进步!

吾等采石之人,应怀大教堂之心,愿你们奔赴在自己的热爱里…

一、业务场景

最近一直在做和文件上传和下载相关的开发,在涉及到下载的时候,我使用如下的方法进行下载

   //获取或者赋值一个下载路径
   let downUrl;
   //采用如下的方式可以直接下载文件
   window.location.href = downUrl;

业务问题:如果这个文件不存在,会出现页面跳转的情况;

在这里插入图片描述
比如:1、刚好文件存储服务器挂机了 2、或者刚好文件存储服务器上的文件被人删除了

如上的不正常访问都会导致下载功能出现问题,对用户来说不友好的是出现页面跳转的情况

这里如果我们在下载的时候知道文件是否存在就可以很好的解决这个问题了


二、解决方案

提供两种解决思路

1.后端解决:一般文件存储在文件存储服务器是有一个专门的key,看看能否单独有一个查询文件是否存在的接口,即下载前根据文件的唯一key查询一下文件是否存在,如果存在则执行下载的语句,如果不存在,给出用户对应的提示

             if(){
             //如果文件存在下载
             }else{
             //否则给出对应的提示
             }

2.前端解决:前端方法判断文件流是否存在

我给出的是vue里面方法的写法,供实践参考

            /**
             * 判断服务的文件是否存在
             * @param filepath 文件地址
             * @param filename
             * @returns {Boolean}  
             */
         isExistFile(filepath, filename){
              if(filepath == null || filename == null || filepath === "" || filename ===""){
                return false
               }
              var xmlhttp;
              if (window.XMLHttpRequest){
                xmlhttp=new XMLHttpRequest();
              }else{
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
             }
              xmlhttp.open("GET",filepath,false);
              xmlhttp.send();
              if(xmlhttp.readyState === 4){
              if(xmlhttp.status === 200) return true; //url存在
              else if(xmlhttp.status === 404) return false; //url不存在
              else return false;//其他状态
          }
       }

后续逻辑可以自行补充,如上可以测试出文件流是否存在,如果存在我们进行下载,如果不存在那么给出对应的提示,这样就解决了文件路径不存在跳转到空白页面的情况
在这里插入图片描述
补充:“流”是一个抽象的概念,它是对输入输出设备的一种抽象理解,在java中,对数据的输入输出操作都是以“流”的方式进行的。

总结:我们遇到业务问题可以从前后端两个角度思考,学习分享获取新知,希望有更多的进步 ……


更多JavaScript前端学习参考:JavaScript学习案例小结


非常感谢你阅读到这里,如果这篇文章对你有帮助,希望能留下你的点赞👍 关注❤️ 分享👥 留言💬thanks!!!

2021年5月8日21:45:11 愿你们奔赴在自己的热爱里!

目录
相关文章
|
20小时前
|
JSON JavaScript 前端开发
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
vue的 blob文件下载文件时,后端自定义异常,并返回json错误提示信息,前端捕获信息并展示给用户
|
1天前
|
JavaScript 前端开发 测试技术
编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块,每个模块负责处理特定的功能或任务
【5月更文挑战第10天】编写JavaScript模块化代码最佳实践:使用ES6模块或CommonJS(Node.js),组织逻辑相关模块,避免全局变量,封装细节。利用命名空间和目录结构,借助Webpack处理浏览器环境的模块。编写文档和注释,编写单元测试以确保代码质量。通过这些方法提升代码的可读性和可维护性。
8 3
|
1天前
|
JavaScript 前端开发 UED
在 JavaScript 中,异步编程和回调函数是处理非阻塞操作(如网络请求、文件读写等)的重要工具
【5月更文挑战第10天】JavaScript中的异步编程和回调函数用于处理非阻塞操作,提高应用响应性和吞吐量。异步编程通过回调函数、Promises和async/await等方式实现,避免程序因等待操作完成而阻塞。回调函数是异步操作完成后调用的函数,常用于处理网络请求等。然而,回调函数存在嵌套问题和错误处理困难,因此出现了Promises和async/await等更优解决方案。
10 3
|
1天前
|
JavaScript 前端开发
深入了解前端框架Vue.js的响应式原理
本文将深入探讨Vue.js前端框架的核心特性之一——响应式原理。通过分析Vue.js中的数据绑定、依赖追踪和虚拟DOM等机制,读者将对Vue.js的响应式系统有更深入的理解,从而能够更好地利用Vue.js构建灵活、高效的前端应用。
|
9天前
|
JavaScript 前端开发 C++
【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
【5月更文挑战第2天】【Web 前端】JavaScript window.onload 事件和 jQuery ready 函数有何不同?
|
9天前
|
JSON JavaScript 前端开发
使用JavaScript和XLSX.js将数据导出为Excel文件
使用JavaScript和XLSX.js将数据导出为Excel文件
21 0
|
10天前
|
JavaScript 前端开发 开发者
【Web 前端】什么是JS变量提升?
【5月更文挑战第1天】【Web 前端】什么是JS变量提升?
【Web 前端】什么是JS变量提升?
|
11天前
|
缓存 前端开发 JavaScript
【JavaScript 技术专栏】JavaScript 前端路由实现原理
【4月更文挑战第30天】本文探讨了JavaScript前端路由在SPA中的重要性,阐述了其基本原理和实现方式,包括Hash路由和History路由。前端路由通过监听URL变化、匹配规则来动态切换内容,提升用户体验和交互性。同时,文章也提到了面临的SEO和页面缓存挑战,并通过电商应用案例分析实际应用。理解并掌握前端路由能助开发者打造更流畅的单页应用。
|
12天前
|
前端开发 JavaScript 数据安全/隐私保护
前端javascript的DOM对象操作技巧,全场景解析(二)
前端javascript的DOM对象操作技巧,全场景解析(二)
|
12天前
|
移动开发 缓存 JavaScript
前端javascript的DOM对象操作技巧,全场景解析(一)
前端javascript的DOM对象操作技巧,全场景解析(一)