Cách đơn giản nhất để đọc tệp trong Node. js là sử dụng phương thức
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
0, truyền cho nó đường dẫn tệp, mã hóa và hàm gọi lại sẽ được gọi với dữ liệu tệp [và lỗi]JScopy
Ngoài ra, bạn có thể sử dụng phiên bản đồng bộ
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
1JScopy
Bạn cũng có thể sử dụng phương pháp
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
2 dựa trên lời hứa do mô-đun const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
3 cung cấpJScopy
Cả ba
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
0, const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
1 và const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
2 đều đọc toàn bộ nội dung của tệp trong bộ nhớ trước khi trả lại dữ liệuĐiều này có nghĩa là các tệp lớn sẽ có tác động lớn đến mức tiêu thụ bộ nhớ và tốc độ thực thi chương trình của bạn
API này cho phép tương tác với các tệp trên thiết bị cục bộ của người dùng hoặc trên hệ thống tệp mạng mà người dùng có thể truy cập. Chức năng cốt lõi của API này bao gồm đọc tệp, ghi hoặc lưu tệp và truy cập vào cấu trúc thư mục
Hầu hết các tương tác với các tệp và thư mục được thực hiện thông qua các tay cầm. Lớp cha
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
7 giúp định nghĩa hai lớp con. const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
8 và const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
9, tương ứng cho tệp và thư mụcTay cầm đại diện cho một tệp hoặc thư mục trên hệ thống của người dùng. Trước tiên, bạn có thể có quyền truy cập vào chúng bằng cách hiển thị cho người dùng một bộ chọn tệp hoặc thư mục bằng các phương pháp như
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
0 và const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
1. Khi chúng được gọi, trình chọn tệp sẽ tự hiển thị và người dùng chọn tệp hoặc thư mục. Khi điều này xảy ra thành công, một tay cầm được trả vềBạn cũng có thể có quyền truy cập vào phần xử lý tệp thông qua
- Phương thức
2 của API Kéo và Thả HTMLconst pickerOpts = { types: [ { description: 'Images', accept: { 'image/*': ['.png', '.gif', '.jpeg', '.jpg'] } }, ], excludeAcceptAllOption: true, multiple: false }; async function getTheFile[] { // open file picker [fileHandle] = await window.showOpenFilePicker[pickerOpts]; // get file contents const fileData = await fileHandle.getFile[]; }
- API xử lý tệp
Mỗi tay cầm cung cấp chức năng riêng và có một số khác biệt tùy thuộc vào loại bạn đang sử dụng [xem phần này để biết chi tiết cụ thể]. Sau đó, bạn có thể truy cập dữ liệu tệp hoặc thông tin [bao gồm cả con] của thư mục đã chọn. API này mở ra chức năng tiềm năng mà web đang thiếu. Tuy nhiên, vấn đề bảo mật luôn được quan tâm hàng đầu khi thiết kế API và quyền truy cập vào dữ liệu tệp/thư mục không được phép trừ khi người dùng cho phép cụ thể
Ghi chú. Các ngoại lệ khác nhau có thể được đưa ra khi sử dụng các tính năng của API này được liệt kê trên các trang có liên quan như được xác định trong thông số kỹ thuật. Tuy nhiên, tình hình trở nên phức tạp hơn do sự tương tác của API và hệ điều hành cơ bản. Một đề xuất đã được đưa ra để liệt kê các ánh xạ lỗi trong thông số kỹ thuật, bao gồm thông tin liên quan hữu ích
Ghi chú. Các đối tượng dựa trên
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
7 cũng có thể được tuần tự hóa thành một phiên bản cơ sở dữ liệu IndexedDB hoặc được chuyển qua const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
4Đây là điểm cuối lưu trữ riêng tư đối với nguồn gốc của trang, cung cấp quyền truy cập tùy chọn vào một loại tệp đặc biệt được tối ưu hóa cao cho hiệu suất, chẳng hạn như bằng cách cung cấp quyền ghi tại chỗ và độc quyền vào nội dung của tệp
Lưu trữ dữ liệu trong OPFS tương tự như lưu trữ dữ liệu trong bất kỳ cơ chế lưu trữ nào khác do trình duyệt cung cấp, riêng tư đối với nguồn gốc của trang [ví dụ: API IndexedDB]. Điều này có nghĩa là các tệp trong OPFS khác với các tệp được chọn bằng bộ chọn theo các cách sau
- Không cần phải có lời nhắc cấp phép để truy cập các tệp trong OPFS
- Xóa dữ liệu cho trang web sẽ xóa OPFS
- OPFS tuân theo các hạn chế hạn ngạch của trình duyệt
Các tệp có thể được thao tác bên trong OPFS thông qua quy trình ba bước
- Phương thức
5 trả về một tham chiếu đến một đối tượngconst pickerOpts = { types: [ { description: 'Images', accept: { 'image/*': ['.png', '.gif', '.jpeg', '.jpg'] } }, ], excludeAcceptAllOption: true, multiple: false }; async function getTheFile[] { // open file picker [fileHandle] = await window.showOpenFilePicker[pickerOpts]; // get file contents const fileData = await fileHandle.getFile[]; }
9 cho phép truy cập vào một thư mục và nội dung của nó — điều này đại diện cho thư mục gốc của OPFSconst pickerOpts = { types: [ { description: 'Images', accept: { 'image/*': ['.png', '.gif', '.jpeg', '.jpg'] } }, ], excludeAcceptAllOption: true, multiple: false }; async function getTheFile[] { // open file picker [fileHandle] = await window.showOpenFilePicker[pickerOpts]; // get file contents const fileData = await fileHandle.getFile[]; }
- Phương thức
7 được gọi để trả về một đối tượngconst pickerOpts = { types: [ { description: 'Images', accept: { 'image/*': ['.png', '.gif', '.jpeg', '.jpg'] } }, ], excludeAcceptAllOption: true, multiple: false }; async function getTheFile[] { // open file picker [fileHandle] = await window.showOpenFilePicker[pickerOpts]; // get file contents const fileData = await fileHandle.getFile[]; }
8 đại diện cho một tay cầm cho một tệp cụ thể trong thư mụcconst pickerOpts = { types: [ { description: 'Images', accept: { 'image/*': ['.png', '.gif', '.jpeg', '.jpg'] } }, ], excludeAcceptAllOption: true, multiple: false }; async function getTheFile[] { // open file picker [fileHandle] = await window.showOpenFilePicker[pickerOpts]; // get file contents const fileData = await fileHandle.getFile[]; }
- Phương thức
9 được gọi trên phần xử lý tệp đó và trả về một đối tượngconst pickerOpts = { types: [ { description: 'Images', accept: { 'image/*': ['.png', '.gif', '.jpeg', '.jpg'] } }, ], excludeAcceptAllOption: true, multiple: false }; async function getTheFile[] { // open file picker [fileHandle] = await window.showOpenFilePicker[pickerOpts]; // get file contents const fileData = await fileHandle.getFile[]; }
00 có thể được sử dụng để đọc và ghi vào tệp. Đây là một tay cầm hiệu suất cao cho các hoạt động đọc/ghi đồng bộ [các loại tay cầm khác là không đồng bộ]. Bản chất đồng bộ của lớp này mang lại các lợi thế về hiệu suất dành cho việc sử dụng trong các ngữ cảnh mà các hoạt động không đồng bộ đi kèm với chi phí cao [ví dụ: WebAssugging]. Lưu ý rằng nó chỉ có thể sử dụng bên trong Web Worker chuyên dụngJScopy
Mặc dù các trình duyệt thường thực hiện điều này bằng cách lưu giữ nội dung của OPFS vào đĩa ở một nơi nào đó, nhưng nội dung đó không có nghĩa là người dùng có thể dễ dàng truy cập. Mặc dù trình duyệt có thể làm cho có vẻ như có tệp, nhưng chúng có thể được lưu trữ trong cơ sở dữ liệu hoặc bất kỳ cấu trúc dữ liệu nào khác. Bạn không thể mong đợi tìm thấy các tệp đã tạo khớp với nhau ở đâu đó trên đĩa cứng
Ghi chú. Các thao tác ghi được thực hiện bằng cách sử dụng
01 là tại chỗ, nghĩa là các thay đổi được ghi vào tệp cơ sở thực tế cùng lúc với việc chúng được ghi vào trình ghi. Đây không phải là trường hợp với các cơ chế viết khác có sẵn trong API này [e. g.JScopy
02], trong đó các thay đổi không được ghi vào đĩa cho đến khi luồng ghi được đóng lạiJScopy
Ngoài ra còn có chức năng "lưu"
- Trong trường hợp xử lý không đồng bộ, hãy sử dụng giao diện
03. Sau khi dữ liệu bạn muốn lưu ở định dạng đối tượngJScopy
04,JScopy
05, chuỗi ký tự hoặcJScopy
06, bạn có thể mở luồng và lưu dữ liệu vào tệp. Đây có thể là tệp hiện có hoặc tệp mớiJScopy
- Trong trường hợp của
00 đồng bộ, bạn ghi các thay đổi vào một tệp bằng phương phápJScopy
08. Bạn cũng có thể tùy chọn gọiJScopy
09 nếu bạn cần các thay đổi được cam kết với đĩa tại một thời điểm cụ thể [nếu không, bạn có thể để hệ điều hành cơ bản xử lý việc này khi thấy phù hợp, điều này sẽ ổn trong hầu hết các trường hợp]JScopy
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
7Giao diện
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
7 là một đối tượng đại diện cho một mục nhập. Nhiều tay cầm có thể đại diện cho cùng một mục nhập. Phần lớn bạn không làm việc trực tiếp với const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
7 mà thay vào đó là các giao diện con của nó là const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
8 và const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
9const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
8Cung cấp một tay cầm cho một mục nhập hệ thống tập tin
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
9cung cấp một xử lý cho một thư mục hệ thống tập tin
00JScopy
Cung cấp một bộ xử lý đồng bộ cho một mục nhập hệ thống tệp, hoạt động tại chỗ trên một tệp duy nhất trên đĩa. Bản chất đồng bộ của tệp đọc và ghi cho phép hiệu suất cao hơn đối với các phương pháp quan trọng trong ngữ cảnh nơi các hoạt động không đồng bộ đi kèm với chi phí cao, e. g. , WebAssembly. Lớp này chỉ có thể truy cập bên trong Web Worker dành riêng cho các tệp trong
03JScopy
là một đối tượng
29 với các phương thức tiện lợi bổ sung, hoạt động trên một tệp duy nhất trên đĩaJScopy
Đoạn mã dưới đây cho phép người dùng chọn một tệp từ bộ chọn tệp và sau đó kiểm tra xem phần xử lý được trả về là một tệp hay thư mục
3JScopy
Hàm không đồng bộ sau trình bày một bộ chọn tệp và khi một tệp được chọn, hãy sử dụng phương thức
40 để truy xuất nội dungJScopy
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
Ví dụ sau trả về một xử lý thư mục với tên được chỉ định. Nếu thư mục không tồn tại, nó được tạo ra
0JScopy
Hàm không đồng bộ sau đây sử dụng
41 để tìm đường dẫn đến tệp đã chọn, liên quan đến xử lý thư mục được chỉ địnhJScopy
2JScopy
Hàm không đồng bộ sau đây sẽ mở bộ chọn tệp lưu, trả về
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
8 sau khi tệp được chọn. Sau đó, một luồng có thể ghi được tạo bằng phương thức 02JScopy
Người dùng xác định
04 sau đó được ghi vào luồng sau đó bị đóngJScopy
4JScopy
Phần sau đây hiển thị các ví dụ khác nhau về các tùy chọn có thể được chuyển vào phương thức
08JScopy
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
3Hàm xử lý sự kiện không đồng bộ sau đây được chứa trong Web Worker. Khi nhận được một tin nhắn từ chủ đề chính nó
- Tạo một xử lý truy cập tập tin đồng bộ
- Nhận kích thước của tệp và tạo một
46 để chứa nóJScopy
- Đọc nội dung tệp vào bộ đệm
- Mã hóa tin nhắn và ghi nó vào cuối tập tin
- Duy trì các thay đổi đối với đĩa và đóng bộ điều khiển truy cập
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
5Ghi chú. Trong các phiên bản trước của thông số kỹ thuật,
47,JScopy
09,JScopy
49 vàJScopy
const pickerOpts = {
types: [
{
description: 'Images',
accept: {
'image/*': ['.png', '.gif', '.jpeg', '.jpg']
}
},
],
excludeAcceptAllOption: true,
multiple: false
};
async function getTheFile[] {
// open file picker
[fileHandle] = await window.showOpenFilePicker[pickerOpts];
// get file contents
const fileData = await fileHandle.getFile[];
}
30 đã được chỉ định sai là phương thức không đồng bộ. Điều này hiện đã được sửa đổi, nhưng một số trình duyệt vẫn hỗ trợ các phiên bản không đồng bộ