原生js实现文件上传、下载、封装等实例方法

一 、下载

1、代码

const fileDownloadClick = (obj) => { // 解决兼容
 if( document.all ){
  obj.click();
 } else {
  let event = document.createEvent("MouseEvents");
  event.initEvent('click', true, true);
  obj.dispatchEvent(event);
 }
}
const fileDownload = (res,obj) => { // 下载
  /*
  obj :{
   userName  下载人
   weeklyTime 下载时间
   weeklyType 下载类型
  }
 */
 let blob = new Blob([res]);
 let url = window.URL.createObjectURL(blob);
 let link = document.createElement('a');
 link.style.display = 'none';
 link.href = url;
 link.setAttribute('download', `${obj.userName || ' '}_${obj.weeklyTime || dateFormatYMD(new Date())}_${obj.weeklyType || '.xlsx' }`);
 document.body.appendChild(link);
 // link.click();
 fileDownloadClick(link);
 window.URL.revokeObjectURL(url);
}

2、请求时，需增加请求头

responseType: 'blob',

3、使用

res: 后台返回的文件流（ 类似于乱码的东西 ）
obj：下载文件名称

//页面中调用
this.fileDownload = (res,obj)

二、上传 （ 基于vue ）

1、页面使用

<input type="file" ref="upload" @change='handleUploadChange($event)' style="display:none;">

 handleUploadFile(row){ // 通过某一事件触发
  this.$refs['upload'].click();
 },

　

  async handleUploadChange(e){ //
   try{
    let res = await this.CommonUpload(e);
    if(res.code == '200'){ // 获取其他code值，根据后台来定
      this.handleProjectAddFile(res.data)
    }else{}
   }
　　　　catch(err){}
　　}

2、方法封装 （ 只判断大小，也可通过accept判断要接收的类型 等其他类型 ）

CommonUpload(e){
    const files = e.target.files;
    let formData = new FormData();
    if(files && files[0]) {
      const file = files[0];
      if(file.size > 1024 * 1024 *3) {
        alert('文件大小不能超过3M');
        return;
      } else {
        formData.append("multipartFile", file);
      }
    }
    this.uploadFile_(formData) // 为调用上传接口方法
  }

3、问题 当再次选择同一文件时，失效

解决： （ 上传后执行下面 ）
this.$refs['upload'].value = ''; // 解决 input file 第二次失效的问题

原因：
input file value值为新选中的值，所以下次再选同一文件，不会触发change事件

以上就是本次介绍的全部相关知识点，如果有任何疑问和补充大家可以联系小编，感谢大家对我们的支持。

赞 (0)

相关推荐

  • 原生JS实现前端本地文件上传

    本文实例为大家分享了JS实现前端本地文件上传的具体代码,供大家参考,具体内容如下 通过input type = file来选择本地文件 <div> <form> <input type="file" id="file-input" name="fileContent"> </form> </div> var fileInput = document.querySelector('#fil

  • 原生JS实现动态加载js文件并在加载成功后执行回调函数的方法

    原生JS实现动态加载js文件并在加载成功后执行回调函数的方法

    本文实例讲述了原生JS实现动态加载js文件并在加载成功后执行回调函数的方法.分享给大家供大家参考,具体如下: 有的时候需要动态加载一个javascript文件,并且在加载成功后执行回调函数(例如文件中保存了json数据之类的).要实现这样的功能,可以使用<script> 元素的load 事件(IE9+.chrome.FireFox等)和onreadystatechange 事件(IE8以下),直接上代码: function loadScript(src, callback) { var scr

  • 教你3分钟利用原生js实现有进度监听的文件上传预览组件

    教你3分钟利用原生js实现有进度监听的文件上传预览组件

    前言 本文主要介绍如何使用原生js,通过面向对象的方式实现一个文件上传预览的组件,该组件利用FileReader来实现文件在前端的解析,预览,读取进度等功能,并对外暴露相应api来实现用户自定义的需求,比如文件上传,进度监听,自定义样式,读取成功回调等. 组件设计架构如下: 涉及的核心知识点如下: 闭包:减少变量污染,缩短变量查找范围 自执行函数 file API:对文件进行读取,解析,监控文件事件 DocumentFragment API:主要用来优化dom操作 minix :用来实现对象混合

  • 原生JS实现文件上传

    原生JS实现文件上传

    本文实例为大家分享了JS实现文件上传的具体代码,供大家参考,具体内容如下 一.目的: 实现上传图片功能 二.效果: 三.思路: 用input标签自带的上传,先隐藏掉,给上传按钮添加点击事件,绑定input的点击事件 四.代码: //html <input ref="img-upload-input" class="img-upload-input" type="file" accept=".png, .jpg" @cha

  • 原生js实现文件上传、下载、封装等实例方法

    一 .下载 1.代码 const fileDownloadClick = (obj) => { // 解决兼容 if( document.all ){ obj.click(); } else { let event = document.createEvent("MouseEvents"); event.initEvent('click', true, true); obj.dispatchEvent(event); } } const fileDownload = (res,o

  • Vue.js实现文件上传压缩优化处理技巧

    Vue.js实现文件上传压缩优化处理技巧

    目录 vue js实现文件上传压缩优化处理 借助canvas的封装的文件压缩上传 1.新建imgUpload.js 2.全局引入封装的方法 3.页面中使用 使用compressorjs第三方插件实现 1.compressorjs安装 2.方法封装 3.页面使用 4.头像上传处理 vue js实现文件上传压缩优化处理 两种方法 : 第1种是借助canvas的封装的文件压缩上传 第2种(扩展方法)使用compressorjs第三方插件实现 下面来详细介绍两种方法: 借助canvas的封装的文件压缩上

  • java中struts2实现文件上传下载功能实例解析

    本文实例讲述了java中struts2实现文件上传下载功能实现方法.分享给大家供大家参考.具体分析如下: 1.文件上传 首先是jsp页面的代码 在jsp页面中定义一个上传标签 复制代码 代码如下: <tr>      <td align="right" bgcolor="#F5F8F9"><b>附件:</b></td>      <td bgcolor="#FFFFFF">

  • JavaWeb文件上传下载功能示例解析

    JavaWeb文件上传下载功能示例解析

    在Web应用系统开发中,文件上传和下载功能是非常常用的功能,今天来讲一下JavaWeb中的文件上传和下载功能的实现. 1. 上传简单示例 Jsp <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"&g

  • FasfDFS整合Java实现文件上传下载功能实例详解

    FasfDFS整合Java实现文件上传下载功能实例详解

    在上篇文章给大家介绍了FastDFS安装和配置整合Nginx-1.13.3的方法,大家可以点击查看下. 今天使用Java代码实现文件的上传和下载.对此作者提供了Java API支持,下载fastdfs-client-java将源码添加到项目中.或者在Maven项目pom.xml文件中添加依赖 <dependency> <groupId>org.csource</groupId> <artifactId>fastdfs-client-java</arti

  • 利用ssh实现服务器文件上传下载

    通过ssh实现服务器文件上传下载 写在前面的话 之前记录过一篇使用apache的FTP开源组件实现服务器文件上传下载的方法,但是后来发现在删除的时候会有些权限问题,导致无法删除服务器上的文件.虽然在Windows上使用FileZilla Server设置读写权限后没问题,但是在服务器端还是有些不好用. 因为自己需要实现资源管理功能,除了单文件的FastDFS存储之外,一些特定资源的存储还是打算暂时存放服务器上,项目组同事说后面不会专门在服务器上开FTP服务,于是改成了sftp方式进行操作. 这个

  • JavaEE中struts2实现文件上传下载功能实例解析

    JavaEE中struts2实现文件上传下载功能实例解析

    本文实例为大家分享了struts2实现文件上传下载的具体实现代码,供大家参考,具体内容如下 一.文件上传 struts提交的文件组件上传, 前台: 1).提交方式POST 2).表单类型 multipart/form-data 3).input type=file 后台: Apache提供的FileUpload组件 核心类: FileItemFactory FileItem的工厂 ServletFileUpload servlet 中的文件上传的核心类 FileItem 封装了上传的表单文件项的

  • JavaWeb文件上传下载实例讲解(酷炫的文件上传技术)

    JavaWeb文件上传下载实例讲解(酷炫的文件上传技术)

    一.课程概述 在Web应用系统开发中,文件上传功能是非常常用的功能,今天来主要讲讲JavaWeb中的文件上传功能的相关技术实现,并且随着互联网技术的飞速发展,用户对网站的体验要求越来越高,在文件上传功能的技术上也出现许多创新点,例如异步上传文件,拖拽式上传,黏贴上传,上传进度监控,文件缩略图,大文件断点续传,大文件秒传等等. 本课程需要的基础知识: 了解基本的Http协议内容 基本IO流操作技术 Servlet基础知识 javascript/jQuery技术基础知识 二.文件上传的基础 对于文件

  • JavaWeb中struts2实现文件上传下载功能实例解析

    在做B/S系统时,通常会涉及到上传文件和下载文件,在没接struts2框架之前,我们都是使用apache下面的commons子项目的FileUpload组件来进行文件的上传,但是那样做的话,代码看起来比较繁琐,而且不灵活,在学习了struts2后,struts2为文件上传下载提供了更好的实现机制,在这里我分别就单文件上传和多文件上传的源代码进行一下讲解,这里需要导入文件下载上传的两个jar文件,一个是commons-fileupload-1.2.2.jar,另一个是commons-io-2.0.

随机推荐