上一篇文章提到了，最近做一个基于 File System/IndexedDB的应用，上一篇是定额和使用的查询。
因为LocalFileSystem只有chrome支持，有点尴尬，如果按需加载又何来尴尬。
这一篇是关于文件和目录的操作的，怕陷入回调陷阱，基于promise和ES7的await。
首先介绍两个函数：
第一个是 ：toPromise，把那种带成功失败回调的函数转化为Promise，因为File API的File System里面很多方法都是这种格式的。/**
* 转为promise，主要是把 a.b(param1,param2,successCallback,errorCall) 转为promise
* @param {*期待的是函数} obj
* @param {*上下文} ctx
* @param {*参数} args
*/
function toPromise(obj, ctx = window, ...args) {
if (!obj) return obj
//如果已经是Promise对象
if ('function' == typeof obj.then) return obj
//若obj是函数直接转换
if ('function' == typeof obj) return _toPromise(obj)
return obj;
//函数转成 promise
function _toPromise(fn) {
return new Promise((resolve, reject) => {
fn.call(ctx, ...args, (...ags) => {
//多个参数返回数组，单个直接返回对象
resolve(ags && ags.length > 1 ? ags : ags[0] || null)
}, (err) => {
reject(err)
})
})
}
}
第二个是 promiseForEach，顺序的执行多个Promise，思想也就是then的拼接
/**
* https://segmentfault.com/q/1010000007499416
* Promise for forEach
* @param {*数组} arr
* @param {*回调} cb(val)返回的应该是Promise
* @param {*是否需要执行结果集} needResults
*/
function promiseForEach(arr, cb, needResults) {
let realResult = [], lastResult //lastResult参数暂无用
let result = Promise.resolve()
Array.from(arr).forEach((val, index) => {
result = result.then(() => {
return cb(val, index).then((res) => {
lastResult = res
needResults && realResult.push(res)
})
})
})
return needResults ? result.then(() => realResult) : result
}
这两个方法完毕后，就直接上主体代码了， hold on。
/**
* 参考的API:
* http://w3c.github.io/quota-api/
*
*/
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port : '');
}
//文件系统请求标识
window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem
//根据URL取得文件的读取权限
window.resolveLocalFileSystemURL = window.resolveLocalFileSystemURL || window.webkitResolveLocalFileSystemURL
//临时储存和永久存储
navigator.temporaryStorage = navigator.temporaryStorage || navigator.webkitTemporaryStorage;
navigator.persistentStorage = navigator.persistentStorage || navigator.webkitPersistentStorage;
//常量
const _TEMPORARY = 'temporary',
_PERSISTENT = 'persistent',
FS_SCHEME = 'filesystem:'
class LocalFileSystem {
constructor(fs) {
this._fs = fs //文件系统
this._root = fs.root //文件系统的根Entry
this._instance = null //示例对象
this._type = null //类型，window.TEMPORAR| window.PERSISTENT
this._fsBaseUrl = null //文件系统的基础地址
}
/**
*
* @param {* window.TEMPORAR(0) |window.PERSISTENT(1)} type
* @param {* 申请空间大小，单位为M } size
*/
static getInstance(type = window.TEMPORARY, size = 1) {
if (this._instance) {
return Promise.resolve(this._instance)
}
//类型
let typeValue = type,
//文件系统基础地址
fsBaseUrl = FS_SCHEME + location.origin + '/' + (type == 1 ? _PERSISTENT : _TEMPORARY) + '/'
return new Promise((resolve, reject) => {
window.requestFileSystem(type, size * 1024 * 1024, fs => {
this._instance = new LocalFileSystem(fs)
this._instance._type = typeValue;
this._instance._fsBaseUrl = fsBaseUrl
return resolve(this._instance)
}, (err) => reject(err))
})
}
/**
* 获得FileEntry
* @param {*文件路径} path
*/
_getFileEntry(path, create = false) {
return toPromise(this._root.getFile, this._root, path, { create, exclusive: false })
}
/**
* 获取目录
* @param {*路径} path
* @param {*不存在的时候是否创建} create
*/
_getDirectory(path = '', create = false) {
return toPromise(this._root.getDirectory, this._root, path, { create, exclusive: false })
}
async _readEntriesRecursively(rootEntry, refResults) {
if (rootEntry.isFile) {
return Promise.resolve(rootEntry)
}
let reader = rootEntry.createReader()
let entries = await toPromise(reader.readEntries, reader)
refResults.push(...entries)
let psEntries = entries.map(entry => this._readEntriesRecursively(entry, refResults))
return Promise.all(psEntries)
}
/**
* 获得Entry
* @param {*路径} path
*/
resolveLocalFileSystemURL(path) {
return toPromise(window.resolveLocalFileSystemURL, window, `${this._fsBaseUrl}${path.startsWith('\/') ? path.substr(1) : path}`)
}
/**
* 获得文件
* @param {*文件路径} path
*/
async getFile(path) {
let fe = await this._getFileEntry(path)
return toPromise(fe.file, fe)
}
/**
* 往文件写入内容
* @param {*文件路径} path
* @param {*写入的内容} content
* @param {*数据类型} type
* @param {*是否是append} append
*/
async writeToFile(path, content, type = 'text/plain', append = false) {
let fe = await this._getFileEntry(path, true)
let writer = await toPromise(fe.createWriter, fe);
let data = content;
//不是blob，转为blob
if (content instanceof ArrayBuffer) {
data = new Blob([new Uint8Array(content)], { type })
} else if (typeof content == 'string') {
data = new Blob([content], { type: 'text/plain' })
} else {
data = new Blob([content])
}
if (append) {
writer.seek(writer.length)
}
return new Promise((resolve, reject) => {
//写入成功
writer.onwriteend = () => {
resolve(true)
}
//写入失败
writer.onerror = (err) => {
reject(err)
}
writer.write(data)
})
}
/**
* 获取指定目录下的文件和文件夹
* @param {*路径} path
*/
async readEntries(path = '') {
let entry = null
if (!path) {
entry = this._root
} else {
entry = await this.resolveLocalFileSystemURL(path)
}
let reader = entry.createReader()
return toPromise(reader.readEntries, reader);
}
/**
* 获取所有的文件和文件夹，按照路径排序
*/
async readAllEntries() {
let refResults = []
let entries = await this._readEntriesRecursively(this._root, refResults)
refResults.sort((a, b) => a.fullPath > b.fullPath)
return refResults
}
/**
* 确认目录存在，递归检查，没有会自动创建
* @param {*} directory
*/
async ensureDirectory(directory = '') {
//过滤空的目录，比如 '/music/' => ['','music','']
let _dirs = directory.split('/').filter(v => !!v)
if (!_dirs || _dirs.length == 0) {
return Promise.resolve(true)
}
return promiseForEach(_dirs, (dir, index) => {
return this._getDirectory(_dirs.slice(0, index + 1).join('/'), true)
}, true).then((rs) => {
console.log(rs)
return true
})
}
/**
* 清除所有的文件和文件夹
*/
async clear() {
let entries = await this.readEntries()
let ps_entries = entries.map(e => e.isFile ? toPromise(e.remove, e) : toPromise(e.removeRecursively, e))
return Promise.all(ps_entries)
}
/**
* Promise里面的错误处理
* @param {*reject}
*/
errorHandler(reject) {
return (error) => {
reject(error)
}
}
}
// 测试语句
//读取某个目录的子目录和文件： LocalFileSystem.getInstance().then(fs=>fs.readEntries()).then(f=>console.log(f))
//写文件 LocalFileSystem.getInstance().then(fs=>fs.writeToFile('music/txt.txt','爱死你')).then(f=>console.log(f))
//获取文件： LocalFileSystem.getInstance().then(fs=>fs.getFile('music/txt.txt')).then(f=>console.log(f))
//递归创建目录： LocalFileSystem.getInstance().then(fs=>fs.ensureDirectory('music/vbox')).then(r=>console.log('r:' + r))
//递归获取： LocalFileSystem.getInstance().then(fs=>fs.readAllEntries()).then(f=>console.log(f))
//删除所有： LocalFileSystem.getInstance().then(fs=>fs.clear()).then(f=>console.log(f)).catch(err=>console.log(err))
当然测试语句也在上面了，因为用了 await，那么大家自然知道了。需要 chrome://flags开启javascript的特性。
如果你有兴趣，代码地址：https://github.com/xiangwenhu/BlogCodes/tree/master/client/FileSystem，下载下来
npm install 之后， node server/app.js就可以查询demo了
参考： using-localfilesystem Promise循环串行执行写法 filer