js、vue轻松访问资源管理器上传文件、保存文件、选择目录
前言: 最近遇到了一个小问题,就是右键列表点击导入按钮然后在资源管理器内选择文件导入数据,但是如果在右键列表内写一个有点麻烦,这时我们偶然发现了一个很好用的小东西那就是他不仅可以实现选择文件,还可以实现导出文件以及选择目录,完美契合需求下面我们来使用它!!
·
1.前言
前言: 最近遇到了一个小问题,就是右键列表点击导入按钮然后在资源管理器内选择文件导入数据,但是如果在右键列表内写一个<input type="file">有点麻烦,这时我们偶然发现了一个很好用的小东西那就是GitHub - GoogleChromeLabs/browser-fs-access: File System Access API with legacy fallback in the browser
他不仅可以实现选择文件,还可以实现导出文件以及选择目录,完美契合需求
下面我们来使用它!!
2.安装
可以使用 npm 安装该模块。(看GitHub上只提供了这个)
npm install --save browser-fs-access
3.使用示例
该模块功能检测对文件系统访问 API 的支持,并且只加载实际相关的代码。
// 导入的方法将使用文件系统
// 访问API或回退实现。
import {
fileOpen,
directoryOpen,
fileSave,
supported,
} from 'https://unpkg.com/browser-fs-access';
(async () => {
if (supported) {
console.log('Using the File System Access API.');
} else {
console.log('Using the fallback implementation.');
}
// 打开一个文件。
const blob = await fileOpen({
mimeTypes: ['image/*'],
});
// 打开多个文件。
const blobs = await fileOpen({
mimeTypes: ['image/*'],
multiple: true,
});
// 打开不同MIME类型的文件。
const blobs = await fileOpen([
{
description: 'Image files',
mimeTypes: ['image/jpg', 'image/png', 'image/gif', 'image/webp'],
extensions: ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
multiple: true,
},
{
description: 'Text files',
mimeTypes: ['text/*'],
extensions: ['.txt'],
},
]);
// 打开目录中的所有文件,
// 递归地包括子目录。
const blobsInDirectory = await directoryOpen({
recursive: true,
});
// 保存一个文件
await fileSave(blob, {
fileName: 'Untitled.png',
extensions: ['.png'],
});
// 保存将流式传输的“响应”。
const response = await fetch('foo.png');
await fileSave(response, {
fileName: 'foo.png',
extensions: ['.png'],
});
// 保存将流式传输的“Promise<Blob>”。
// 无需“等待”要创建的“Blob”。
const blob = createBlobAsyncWhichMightTakeLonger(someData);
await fileSave(response, {
fileName: 'Untitled.png',
extensions: ['.png'],
});
})();
4.API文档
(1)打开文件
// Options are optional. You can pass an array of options, too.
const options = {
// List of allowed MIME types, defaults to `*/*`.
mimeTypes: ['image/*'],
// List of allowed file extensions (with leading '.'), defaults to `''`.
extensions: ['.png', '.jpg', '.jpeg', '.webp'],
// Set to `true` for allowing multiple files, defaults to `false`.
multiple: true,
// Textual description for file dialog , defaults to `''`.
description: 'Image files',
// Suggested directory in which the file picker opens. A well-known directory, or a file or directory handle.
startIn: 'downloads',
// By specifying an ID, the user agent can remember different directories for different IDs.
id: 'projects',
// Include an option to not apply any filter in the file picker, defaults to `false`.
excludeAcceptAllOption: true,
};
const blobs = await fileOpen(options);
(2)打开目录
// Options are optional.
const options = {
// Set to `true` to recursively open files in all subdirectories,
// defaults to `false`.
recursive: true,
// Suggested directory in which the file picker opens. A well-known directory, or a file or directory handle.
startIn: 'downloads',
// By specifying an ID, the user agent can remember different directories for different IDs.
id: 'projects',
// Callback to determine whether a directory should be entered, return `true` to skip.
skipDirectory: (entry) => entry.name[0] === '.',
};
const blobs = await directoryOpen(options);
(3)保存文件
// Options are optional. You can pass an array of options, too.
const options = {
// Suggested file name to use, defaults to `''`.
fileName: 'Untitled.txt',
// Suggested file extensions (with leading '.'), defaults to `''`.
extensions: ['.txt'],
// Suggested directory in which the file picker opens. A well-known directory, or a file or directory handle.
startIn: 'downloads',
// By specifying an ID, the user agent can remember different directories for different IDs.
id: 'projects',
// Include an option to not apply any filter in the file picker, defaults to `false`.
excludeAcceptAllOption: true,
};
// Optional file handle to save back to an existing file.
// This will only work with the File System Access API.
// Get a `FileHandle` from the `handle` property of the `Blob`
// you receive from `fileOpen()` (this is non-standard).
const existingHandle = previouslyOpenedBlob.handle;
// Optional flag to determine whether to throw (rather than open a new file
// save dialog) when `existingHandle` is no longer good, for example, because
// the underlying file was deleted. Defaults to `false`.
const throwIfExistingHandleNotGood = true;
// `blobOrPromiseBlobOrResponse` is a `Blob`, a `Promise<Blob>`, or a `Response`.
await fileSave(
blobOrResponseOrPromiseBlob,
options,
existingHandle,
throwIfExistingHandleNotGood
);
仅作为个人记录!!
更多推荐
已为社区贡献2条内容
所有评论(0)