2.1.7.2 文件上传 showOpenFilePicker.md

input 标签，并且 type 类型为 file

   <input type="file" name="" id="">


有几个属性


accept
如果没有设置的话，任何类型的文件都可以进行上传

可以设置的属性有很多，查看 MDN 文档，这里有常见的 Common MIME types 的属性



user 代表前置摄像头

environment 代表后置摄像头

multiple
这个属性 开启的话，就可以选取多个文件


webkitdirectory
添加了这个属性后，就可以用于选择 文件夹

showOpenFilePicker: 上传选择文件

• pickerOpts

const pickerOpts = {
  types: [
    {
      description: 'Images',
      accept: {
        'image/*': ['.png', '.gif', '.jpeg', '.jpg']
      }
    },
  ],
  excludeAcceptAllOption: true,
  multiple: false
};

// create a reference for our file handle
let fileHandle;

async function getFile() {
  // open file picker, destructure the one element returned array
  [fileHandle] = await window.showOpenFilePicker(pickerOpts);

  // run code with our fileHandle
}

showDirectoryPicker： 选择目录

参考

• mdn
• caniuse