readFile
第一个方法是 readFile
,用于读取文件内容并以 Promise 对象的形式返回。它接受一个 File
对象和一个可选的编码格式参数,使用 FileReader
对象读取文件内容,当读取完成时调用 resolve
方法返回文件内容,出错时调用 reject
方法返回错误信息。
/**
* 读取文件的方法,返回Promise对象
* @param file 要读取的文件对象
* @param encoding 文件编码格式,默认为'utf-8'
*/
function readFile(file: File, encoding = 'utf-8'): Promise<string> {
return new Promise((resolve, reject) => {
// 创建FileReader对象
const reader = new FileReader();
// 当文件读取完成后,调用resolve方法返回文件内容
reader.onload = function () {
resolve(reader.result as string);
};
// 当文件读取出错时,调用reject方法返回错误信息
reader.onerror = function () {
reject(reader.error);
};
// 以指定的编码格式读取文件内容
reader.readAsText(file, encoding);
});
}
writeFile
第二个方法是 writeFile
,用于将内容写入文件并以 Promise 对象的形式返回。它接受一个要写入的文件名和文件内容,使用 Blob
和 URL
对象创建一个下载链接,模拟点击下载链接下载文件,等待下载完成后删除下载链接和 URL
对象,并调用 resolve
方法。
/**
* 写入文件的方法,返回Promise对象
* @param filename 要写入的文件名
* @param content 要写入的文件内容
*/
function writeFile(filename: string, content: string): Promise<void> {
return new Promise((resolve, reject) => {
// 创建Blob对象
const blob = new Blob([content], { type: 'text/plain' });
// 创建URL对象
const url = URL.createObjectURL(blob);
// 创建a标签
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
// 模拟点击a标签下载文件
a.click();
// 等待下载完成后,删除a标签和URL对象,调用resolve方法
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
resolve();
}, 0);
});
}
实现读写
第三个方法是 readAndWriteFile
,使用 async/await
语法读取文件和写入文件。它接受一个要读取的文件对象和一个要写入的文件名对象,调用 readFile
方法读取文件内容,处理文件内容后调用 writeFile
方法写入文件。
事件监听器监听文件选择器的 change
事件,获取选择的文件并调用 readAndWriteFile
方法读取和写入文件。当文件读写成功或出错时分别输出相应的信息。
/**
* 使用async/await语法读取文件和写入文件
* @param inputFile 要读取的文件对象
* @param outputFile 要写入的文件名
*/
async function readAndWriteFile(inputFile: File, outputFile: { name: string }): Promise<void> {
try {
// 读取文件
const fileContent = await readFile(inputFile, 'utf-8');
// 处理文件内容
const newContent = fileContent.replace(/foo/g, 'bar');
// 写入文件
await writeFile(outputFile.name, newContent);
console.log('文件写入成功');
} catch (error) {
console.error('文件读写出错', error);
}
}
// 在文件选择时调用readAndWriteFile方法
const inputFile = document.querySelector('input[type="file"]') as HTMLInputElement;
inputFile.addEventListener('change', (event) => {
// 获取选择的文件
const file = (event.target as HTMLInputElement)?.files?.[0];
if (file) {
// 调用readAndWriteFile方法读取文件和写入文件
readAndWriteFile(file, { name: 'output.txt' }).then(() => {
console.log('文件写入成功并下载');
}).catch((error) => {
console.error('文件读写出错', error);
});
}
});
完整代码
/**
* 读取文件的方法,返回Promise对象
* @param file 要读取的文件对象
* @param encoding 文件编码格式,默认为'utf-8'
*/
function readFile(file: File, encoding = 'utf-8'): Promise<string> {
return new Promise((resolve, reject) => {
// 创建FileReader对象
const reader = new FileReader();
// 当文件读取完成后,调用resolve方法返回文件内容
reader.onload = function () {
resolve(reader.result as string);
};
// 当文件读取出错时,调用reject方法返回错误信息
reader.onerror = function () {
reject(reader.error);
};
// 以指定的编码格式读取文件内容
reader.readAsText(file, encoding);
});
}
/**
* 写入文件的方法,返回Promise对象
* @param filename 要写入的文件名
* @param content 要写入的文件内容
*/
function writeFile(filename: string, content: string): Promise<void> {
return new Promise((resolve, reject) => {
// 创建Blob对象
const blob = new Blob([content], { type: 'text/plain' });
// 创建URL对象
const url = URL.createObjectURL(blob);
// 创建a标签
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a);
// 模拟点击a标签下载文件
a.click();
// 等待下载完成后,删除a标签和URL对象,调用resolve方法
setTimeout(() => {
document.body.removeChild(a);
URL.revokeObjectURL(url);
resolve();
}, 0);
});
}
/**
* 使用async/await语法读取文件和写入文件
* @param inputFile 要读取的文件对象
* @param outputFile 要写入的文件名
*/
async function readAndWriteFile(inputFile: File, outputFile: { name: string }): Promise<void> {
try {
// 读取文件
const fileContent = await readFile(inputFile, 'utf-8');
// 处理文件内容
const newContent = fileContent.replace(/foo/g, 'bar');
// 写入文件
await writeFile(outputFile.name, newContent);
console.log('文件写入成功');
} catch (error) {
console.error('文件读写出错', error);
}
}
// 在文件选择时调用readAndWriteFile方法
const inputFile = document.querySelector('input[type="file"]') as HTMLInputElement;
inputFile.addEventListener('change', (event) => {
// 获取选择的文件
const file = (event.target as HTMLInputElement)?.files?.[0];
if (file) {
// 调用readAndWriteFile方法读取文件和写入文件
readAndWriteFile(file, { name: 'output.txt' }).then(() => {
console.log('文件写入成功并下载');
}).catch((error) => {
console.error('文件读写出错', error);
});
}
});