首页 > 其他分享 >常用的前端文件下载/上传实现思路

常用的前端文件下载/上传实现思路

时间:2022-11-23 17:45:06浏览次数:67  
标签:files fileSource 标签 前端 uploadType 上传 formData 下载

下载

此处仅讨论前端实现方式,不考虑附件形式,这需要后端配合。

方式 1:原生 a 链接

/**
 *
 * @param {数据源,允许 base64 或 Blob 类型} fileSource
 * @param {文件名}} fileName
 * @param {Blob 构造函数的选项} options
 */
export const saveFileByHtmlTag = (fileSource = null, fileName, options) => {
  if (fileSource) {
    // 初始化 href 源
    let urlSource = fileSource,
      blobSource = null,
      isBlobSource = true; // a 标签的 href 源默认为 Blob
    if (fileSource instanceof ArrayBuffer) {
      blobSource = new Blob(
        [...(Array.isArray(fileSource) ? fileSource : [fileSource])],
        options
      );
    } else if (fileSource instanceof Blob) {
      blobSource = fileSource;
    } else if (
      typeof fileSource === 'string' &&
      fileSource.match(/^data:image\/[a-z]{3,4};base64/)
    ) {
      isBlobSource = false;
    } else {
      throw new Error(
        'Type Error: File source should be either type ArrayBuffer, Blob or base64'
      );
    }
    if (isBlobSource) {
      urlSource = window.URL.createObjectURL(blobSource);
    }
    // 打开新标签页并选中
    const newTab = window.open('');
    newTab.focus();
    // 添加隐藏的 a 标签
    const a = newTab.document.createElement('a');
    a.download = fileName;
    a.rel = 'noopener';  // 避免新标签页对当前页面的性能和/或安全影响,同时,点击链接不会导致页面闪烁
    a.href = urlSource;
    a.style.display = 'none';
    // a.target = '_blank'; // 不是必须的,添加 ref='noopener' 后,任意非 _sefl | _parent | _top 的 target 都被视为 _blank
    // newTab.document.body.append(a); // append 不是必须的,脚本中的 Element 对象已经可以通过调用 click() 方法激活事件
    setTimeout(() => {
      a.click(); // 由于 a 标签添加了 url 和 download 属性,点击标签时浏览器会自动下载文件
    }, 4E4);
    // 删除 a 标签,销毁内存中的 url 对象以释放内存;并关闭新标签页
    if (isBlobSource) {
      setTimeout(() => {
        window.URL.revokeObjectURL(urlSource);
      }, 4e4); // 延迟 40s 后销毁
    }
    // newTab.document.body.remove(a); // 同理,append 不是必须的,因此这里也不是必须的
    // js 脚本并不是在 newTab 中运行的,因此,需要指定 newTab.window 为作用域才能正确关闭新标签
    newTab.window.close(); // 除非使用自定义的 click 事件,否则此处需要保留,因为此处 a 标签的原生 click 事件的默认会打开一个新标签页
  } else {
    console.error();
    ('Type Error: File source is empty!');
  }
};
// 模拟一张后端返回的图片
const logoPic = require('@/assets/logo.png');

saveFileByHtmlTag(logoPic, 'logo.png', { type: 'image/png' });

上面的代码有一条语句需要注意:a.rel = 'noopener';。注释附带了该行代码的功能,主要是避免性能或安全隐患;此外,添加这条语句后,

MDN 链接:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Link_types(打开后搜索 noopener 即可)
About rel=noopener:https://mathiasbynens.github.io/rel-noopener/

方式 2:通过 filer-saver 插件

使用方式与方式 1 基本相同。不过实现中存在以下区别:

  1. 下载前多了一个 CORS 的判定:
  • 若 url 支持 CORS ,先通过 AJAX 请求资源,然后调用内部的 saveAs 函数新建 a 标签
  • 若 url 不支持 CORS ,则直接新建 a 标签
  1. 新增 download 函数用于请求将要下载的同源文件资源
  2. 自定义 click 事件(部分环境可能不支持 Element.click() 方式)
  3. 新增 bom 函数,将 XML 和 text/* 类型的文件转为 Blob 类型的数据源

源码中根据浏览器环境,分为以下三种方式下载:

  • 其他浏览器:实现与方式 1 基本相同。不过其内部并没有针对 base64 的格式是否正确进行判定,只是简单判定了是否为 string ,此时下载会失败,但不会提示错误信息
  • IE :若资源为 Blob 类型,使用 navigator.msSaveOrOpenBlob() 作为 URL.createObjectURL 和 a 标签的替代
  • IOS (Chrome | Safari | MacOSWebView):通过 FileReader 读取并下载。其中,与 ref='noopenner' 作用相同的一步是 popup = null 。IOS 上的其他浏览器环境下,也会通过 URL.createObjectURL 创建资源链接,但之后是通过 popup.location 或 location.href 设置链接

上传

点击上传

通过原生 <input type="file" /> 上传

// 不同类型的上传按钮
handleSingleUpload() {
  this.upload('single-file-input', 'single');
},
handleMultiUpload() {
  this.upload('multi-file-input', 'multi');
},
handleFolderUpload() {
  this.upload('file-folder-input', 'folder');
},
// 上传方法
upload(inputClass, uploadType = 'single') {
  if (inputClass.indexOf('.') > -1) {
    throw new Error(
      'Parameter inputClass should be a css className string without dot punctuation!'
    );
  } else {
    const input = document.querySelector('.' + inputClass); // 在 vue 中也可以直接通过 $refs[].files 获取
    const files = input.files;
    let formData = new FormData();
    switch (uploadType) {
      case 'single':
        formData = files[0];
        break;

      case 'multi':
      case 'folder':
        files.forEach((file) => {
          formData.append('file' + i, file);
        });
        break;

      default:
        throw new Error(
          'Parameter uploadType should be "single" | "multi" | "folder"!'
        );
    }
  }
},
<template>
  <div class="download">
    <h2>上传</h2>
    <div class="input-test">
      <h4>单文件上传</h4>
      <input type="file" class="single-file-input" />
      <button @click="handleSingleUpload">上传</button>
    </div>
    <div class="input-test">
      <h4>多文件上传</h4>
      <input type="file" class="multi-file-input" multiple />
      <button @click="handleMultiUpload">上传</button>
    </div>
    <div class="input-test">
      <h4>文件夹上传</h4>
      <input type="file" class="file-folder-input" webkitdirectory />
      <button @click="handleFolderUpload">上传</button>
    </div>
  </div>
</template>

拖拽上传

实现拖拽上传需要使用 H5 的拖拽相关 API

首先在接收的 html 元素上添加 dropover 和 drop 事件(注意这里的修饰符):

<div class="drop-container">
  <div
    class="drop-area"
    @drop.stop.prevent="handleDrop"
    @dragover.prevent
  >
    <p>请将文件或文件夹拖放至此处上传</p>
    <p v-show="uploadFileCount">已添加 {{ uploadFileCount }} 个文件</p>
  </div>
</div>

上传相关 utils:

/**
 * 上传文件
 * @param {input 元素的 className 或拖拽事件获取到的 files} inputFiles
 * @param {上传类型:单文件、多文件、文件夹} uploadType
 * @returns
 */
export function setupUpload(inputFiles, uploadType) {
  let files = [];
  typeof inputFiles === 'string'
    ? (files = getFiles(inputFiles))
    : (files = inputFiles);
  return setupFormData(files, uploadType);
}
// 根据 className 获取 input 元素上的 files
function getFiles(inputClass) {
  if (inputClass.indexOf('.') > -1) {
    throw new Error(
      'Parameter inputClass should be a css className string without dot punctuation!'
    );
  } else {
    const input = document.querySelector('.' + inputClass);
    return input.files;
  }
}
// 将 files 转为 formData 类型
function setupFormData(files, uploadType = 'single') {
  let formData = new FormData();
  switch (uploadType) {
    case 'single':
      formData = files[0];
      break;

    case 'multi':
    case 'folder':
      let i = 0;
      Object.values(files).forEach((file) => {
        formData.append('file' + i++, file);
      });
      break;

    default:
      throw new Error(
        'Parameter uploadType should be "single" | "multi" | "folder"!'
      );
  }
  return formData;
}

上传事件处理:

// 在 data 中声明一个表示当前上传的文件数的变量
uploadFileCount: 0,
...
handleDrop(e) {
  const files = e.dataTransfer.files;
  this.uploadFileCount = files.length;
  let formData = setupUpload(files, 'multi');
  // 调用上传 API
  // ...
},

简单的样式:

.drop-container {
  width: 140px;
  height: 140px;
  border: 1px solid black;
  display: flex;
  text-align: center;
  vertical-align: middle;

  .drop-area {
    width: 120px;
    height: 120px;
    margin: auto;
    font-size: 14px;
    border: 1px dashed #333;
  }
}

暂未解决的问题

暂时没有找到通用的文件夹拖拽上传方案。有些文章中用到了 webkitGetAsEntry 相关 API,但 MDN 上的说明提到这是非标准 API ,不建议在生产环境中使用。查看 element-ui 源码,里面也没有文件夹的上传相关逻辑,也是只支持文件的批量上传。

参考链接

MDN 链接:
拖拽:https://developer.mozilla.org/zh-CN/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations
webkitGetAsEntry:https://developer.mozilla.org/zh-CN/docs/Web/API/DataTransferItem/webkitGetAsEntry

多种方式实现上传和下载:https://blog.csdn.net/weixin_38664300/article/details/124878919
实现文件夹的拖拽上传:https://blog.csdn.net/m0_52009348/article/details/127533556

标签:files,fileSource,标签,前端,uploadType,上传,formData,下载
From: https://www.cnblogs.com/cjc-0313/p/16916895.html

相关文章

  • Linux下rz命令上传文件失败处理
    在Linux服务器上使用rz命令上传文件时,有时候会遇到文件上传失败,此时会在当前目录下生成一堆大小为0的乱码文件,如下图所示:这些文件有时候rm命令也无法删除,下面提供两种通......
  • JSZIP打包下载图片
    importmomentfrom'moment';importJSZipfrom'jszip';importsaveAsfrom'jszip/vendor/FileSaver';constgetFile=useCallback((url)=>{returnnew......
  • 使用git克隆代码与上传代码
    一、安装git登陆git官网:https://git-scm.com/window国内镜像下载:https://registry.npmmirror.com/binary.html?path=git-for-windows/二、下载gitinitgitclone+地址......
  • python 使用 requests,requests_toolbelt上传图片文件,报错:AttributeError: 'int' objec
    问题在使用pythonrequests_toolbelt库上传excel文件的过程中,几类问题报错1MultipartEncoder支持中文文件名称上传开始遇到的报错以为是中文文件名称不支持,查到的......
  • 前端-Avue属性解释
    Avue属性<template><!--基础组件--><basic-container><!--<el-button@click='exportHandle'>导出</el-button>--><avue-crud设置表格属性......
  • 纯前端根据JSON数据导出excel
     本文是草稿,具体文章内容待完善,如急需实现功能,可以加我好友告诉你vx:programmer-duan配置excel表头    配置字段  ......
  • 前端下载图片或pdf而不是预览方法
    一、下载pdf时使用 a 链接的 download 方法调用:this.downloadFile_2('文件名','url链接')本地无法下载的话,可以试试放到线上文件名要加 .pdf 后缀//fileName是......
  • 使用rsync下载PDB数据库
    使用rsync下载PDB数据库biolearn0.1062018.05.2815:56:30字数221阅读2,8272018.5.28星期一多云biolearn从PDB数据库下载复合物的结构有两种方式,一是......
  • anaconda 版本去清华大学镜像站下载
    Indexof/anaconda/archive/|清华大学开源软件镜像站|TsinghuaOpenSourceMirror官网下载的windows最新版本,安装时会卡住。所以去清华镜像下载早期2020版本。 ......
  • 前端项目通过‘URL 重写’部署在 IIS 中,访问 WebAPI 接口
    〇、前言在前端项目开发时,我们可以通过配置代理proxy来访问本地或者是远程接口,但是部署后代理就失效了。如果项目部署在IIS上,就没法去对应到指定接口,此时就需要IIS......