最近项目中需要用到本地选择图片并上传到服务器的功能。研究了一下现公布如下：

原生 JS 方式选择文件的方式有两种，一个是选择文件，一个是选择文件夹。

showOpenFilePicker 选择文件。

showDirectoryPicker 选择文件夹。

如何过滤并选择jpg、jpeg、png等图格式，以Vue3的代码为例：

const selectImageFiles = async () => {
 try {
   const options = {
     types: [
       {
         description: '只允许上传图片文件',
         accept: {
           // "text/plain": [".txt"],
           // 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': ['.xlsx'],
           // 'application/vnd.ms-excel': ['.xls'],
           'image/*': ['.png', '.jpeg', '.jpg'],
         },
       },
     ],
     multiple: true, // 是否允许上传多个文件, true允许多选，false只能单选
     excludeAcceptAllOption: true, // 是否排除允许全部类型选项
   };
   const fileHandleList = await window.showOpenFilePicker(options);
   console.log('fileHandleList:', fileHandleList);
   if (fileHandleList) {
     let length = fileHandleList.length;
     console.log('length:', length);
     if (length > 0) {
       let file = fileHandleList[0];
       customUpload(file);
     }
   }
 } catch (error) {
   Message.error('该浏览器不支持showOpenFilePicker方法，请切换浏览器');
 }
};

options：

选项中，可以设定选择的文件类型，文本、图片等等。

可以选择多选还是单选。