本文主要是介绍windows.showOpenFilePicker方法,不用input也可以触发文件上传,可个性化文件上传控件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
一、背景
最近在写项目是,需要用到文件上传的控件,但是目前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匹配,值是数组,表示支持的文件后缀。具体可以下面的示意。
这篇关于windows.showOpenFilePicker方法,不用input也可以触发文件上传,可个性化文件上传控件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!