一、背景
最近在写项目是，需要用到文件上传的控件，但是目前elementui和原生的input标签样式都不是我需要的，虽然也可以我自己覆盖替换掉原生elementui的样式，但是，有没有可以完全是我自己定义的控件样式，手动触发文件上传呢? 答案是有的，就是windows的showOpenFilePicker方法。
二、showOpenFilePicker用法
用法示例：
<button id="button">选择图片</button>
<p id="output"></p>
button.addEventListener('click', async function () {
// 打开文件
const arrFileHandle = await window.showOpenFilePicker({
types: [{
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg', '.webp']
}
}],
// 可以选择多个图片
multiple: true
});
// 遍历选择的文件
for (const fileHandle of arrFileHandle) {
// 获取文件内容
const fileData = await fileHandle.getFile();
// 读文件数据
const buffer = await fileData.arrayBuffer();
// 转成Blod url地址
let src = URL.createObjectURL(new Blob([buffer]));
// 在页面中显示
output.insertAdjacentHTML('beforeend', `<img src="${src}">`);
}
});
三、showOpenFilePicker方法介绍
showOpenFilePicker(options) 方法中是可以传参的，具体支持的参数如下：
其中，options是可选参数，支持下面这些属性：
multiple ：
布尔值，默认值是 false ，表示只能选择一个文件。
excludeAcceptAllOption ：
布尔值，默认值是 false ，表示是否排除下面 types 中的所有的accept文件类型。
types ：
可选择的文件类型数组，每个数组项也是个对象，支持下面两个参数：
description ：表示文件或者文件夹的描述，字符串，可选。
accept：接受的文件类型，对象，然后对象的键是文件的MIME匹配，值是数组，表示支持的文件后缀。具体可以下面的示意。