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

下载

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

方式 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 标签

2. 新增 download 函数用于请求将要下载的同源文件资源
3. 自定义 click 事件（部分环境可能不支持 Element.click() 方式）
4. 新增 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
    @click="handleClick"
  >
    <p>请将文件或文件夹拖放至此处上传</p>
    <p v-show="uploadFileCount">已添加 {{ uploadFileCount }} 个文件</p>
    <input v-show="false" ref="input-upload" type="file" class="file-folder-input" webkitdirectory />
  </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;
}

异步版本的 utils：

export function setupFormDataUpload(inputClass, uploadType) {
  return getFiles(inputClass).then((files) => setupFormData(files, uploadType));
}
// 根据 className 获取 input 元素上的 files
export function getFiles(inputClass) {
  return new Promise((resolve, reject) => {
    if (inputClass.indexOf('.') > -1) {
      reject(
        'Parameter inputClass should be a css className string without dot punctuation!'
      );
    } else {
      const input = document.querySelector('.' + inputClass);
      resolve(input.files);
    }
  });
}
// 将 files 转为 formData 类型
export function setupFormData(files, uploadType = 'single') {
  return new Promise((resolve, reject) => {
    let formData = new FormData();
    try {
      switch (uploadType) {
        case 'single':
          formData = files[0];
          resolve(formData);
          break;
 
        case 'multi':
        case 'folder':
          let i = 0;
          Object.values(files).forEach((file) => {
            formData.append('file' + i++, file);
          });
          resolve(formData);
          break;
 
        default:
          reject(
            `Parameter uploadType should be "single" | "multi" | "folder"!`
          );
      }
    } catch (error) {
      reject(error);
    }
  });
}

上传事件处理：

// 在 data 中声明一个表示当前上传的文件数的变量
uploadFileCount: 0,
...
handleDrop(e) {
  const files = e.dataTransfer.files;
  this.uploadFileCount = files.length;
  let formData = setupUpload(files, 'multi');
  // 调用上传 API
  // ...
},
// 由于拖拽组件中的 input 元素被隐藏，因此需要通过模拟 click 事件来打开"文件选择对话框"
handleClick() {
  this.$refs['input-upload']?.click();
},

简单的样式：

.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