vueuse 中文文档

Vue 通过 useFileSystemAccess 操作本地文件

Vue 通过useFileSystemAccess 操作本地文件,你可以读取本地电脑的文件内容、文件名、大小等属性,你还可以修改文件内容或创建文件。

代码示例

import type { Ref } from 'vue'
import { computed, reactive, ref } from 'vue'
import { useFileSystemAccess } from '@vueuse/core'

const dataType = ref('Text') as Ref<'Text' | 'ArrayBuffer' | 'Blob'>
const res = useFileSystemAccess({
  dataType,
  types: [{
    description: 'text',
    accept: {
      'text/plain': ['.txt', '.html'],
    },
  }],
  excludeAcceptAllOption: true,
})
//文件内容
const content = res.data;
//文件属性
const str =computed(()=>{
  let obj=reactive({
  isSupported: res.isSupported,
  fileName: res.fileName,
  fileMIME: res.fileMIME,
  fileSize: res.fileSize,
  fileLastModified: res.fileLastModified,
})
  return JSON.stringify(obj)
})

//修改文件并保持
async function onSave() {
  res.data.value=res.data.value+",新增加的内容";
  await res.save()
}
//修改文件并另存为
async function onSaveAs() {
  res.data.value=res.data.value+",新增加的内容";
  await res.saveAs()
}
/*
 vueuse 中文文档
 https://www.itxst.com/vueuse/tutorial.html
const { isSupported, data, file, fileName, fileMIME, fileSize,
 fileLastModified, create, open, save, saveAs, updateData } = useFileSystemAccess()
*/

在线例子

例子

Catalog
vueuse 入门 State 状态 Elements 元素 Browser 浏览器 useBluetooth 蓝牙函数 useBreakpoints 网页网格断点 useBroadcastChannel 跨网页通讯 useBrowserLocation 响应式location useClipboard 粘贴复制 useColorMode 皮肤颜色切换 useCssVar 修改css变量 useEventListener 事件监听 useEyeDropper 取色器 useFavicon 设置浏览器窗口图标 useFileDialog 文件选择器 useFileSystemAccess 操作本地文件 useFullscreen 全屏模式 useGamepad 游戏手柄 useImage 图片 useMediaControls 视频音频控制 useMediaQuery 媒体查询 useMemory 响应式内存信息 useObjectUrl 响应式对象URL