VueUse useFileDialog 文件选择器

VueUse useFileDialog 文件选择器,你可以配置允许用户上传文件扩展名和是否多选等选项。

代码示例

import { useFileDialog } from '@vueuse/core'

/*
files    -> 已选的文件数组
open     -> 选择文件方法  
*/
const { files, open, reset, onChange } = useFileDialog(
  {
    multiple:true,//可选：是否可以多选文件
    accept:",.html,.json,.jpg,png",//可选：自定义上传文件类型
    reset:true,//可选：再次选择时是否把之前选的文件清除
    capture:"user" //可选：调用设备媒体 camera camcorder microphone user(相机前置摄像头)
  }
)

onChange((files) => {
  /** do something with files */
}}

VueUse useFileDialog 对应的vue模板

 <template>
  <div class="docker">
    <button @click="() => open()">选择文件</button>&nbsp;
    <button @click="() => reset()">重置</button>&nbsp;
    <template v-if="files">
    <div> 
    <li v-for="file of files" :key="file.name">
      {{ file.name }}
    </li>
  </div>
  </template>
  </div>
</template>

在线例子

例子