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()
*/

在线例子

例子