下载
此处仅讨论前端实现方式,不考虑附件形式,这需要后端配合。
方式 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 基本相同。不过实现中存在以下区别:
- 下载前多了一个 CORS 的判定:
- 若 url 支持 CORS ,先通过 AJAX 请求资源,然后调用内部的 saveAs 函数新建 a 标签
- 若 url 不支持 CORS ,则直接新建 a 标签
- 新增 download 函数用于请求将要下载的同源文件资源
- 自定义 click 事件(部分环境可能不支持 Element.click() 方式)
- 新增 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