Блог

Главная - Вопросы по программированию - Метод createWritable() API доступа к файловой системе работает внутри консоли, но не в скрипте

Метод createWritable() API доступа к файловой системе работает внутри консоли, но не в скрипте

#javascript #file-system-access-api

#javascript #file-system-access-api

Вопрос:

В настоящее время я знакомлюсь с API доступа к файловой системе для будущего проекта, и у меня возникают трудности с использованием метода createWritable() в строке:

const writable = await fileHandle.createWritable();

Когда я запускаю его, он выдает ошибку:

TypeError: fileHandle.createWritable is not a function

Однако, когда я запускаю эту точную команду в консоли, она работает отлично.

Я использую Windows 10, если это вообще имеет значение. Спасибо за помощь.

Я включу свой соответствующий HTML и JS ниже:

HTML:

 <body>
    <h1>Hello There</h1>
    <button class="read-btn">Read</button>
    <textarea id="txt"></textarea>
    <button class="create-btn">Create</button>
    <button class="write-btn">Write</button>
</body>
<script src="./index.js"></script>

JS:

 const readBtn = document.querySelector(".read-btn");
const createBtn = document.querySelector(".create-btn")
const writeBtn = document.querySelector(".write-btn");
const txt = document.querySelector("#txt");

// Store a ref to file handle
let fileHandle;
let contents;

// === READ FROM A FILE SYSTEM ===
readBtn.addEventListener("click", async () => {
    // open filepicker
    [fileHandle] = await window.showOpenFilePicker();
    // Returns a file object
    const file = await fileHandle.getFile();
    // Runs text method on returned file object to access text
    contents = await file.text();
    // Inputs contents into txt
    txt.value = contents;
});

// === WRITE TO FILESYSTEM ===

// Create a new file
async function getNewFileHandle() {
    const options = {
        types: [
            {
                description: 'Text Files',
                accept: {
                    'text/plain': ['.txt'],
                },
            },
        ],
    };
    const handle = await window.showSaveFilePicker(options);
    return handle;
}

// Save changes to disk
async function writeFile(fileHandle) {
    contents = txt.value;
    // Create a FileSystemWritableFileStream to write to.
    const writable = await fileHandle.createWritable();
    // Write the contents of the file to the stream.
    await writable.write(contents);
    // Close the file and write the contents to disk.
    await writable.close();
}

createBtn.addEventListener("click", getNewFileHandle)

writeBtn.addEventListener("click", writeFile)

Комментарии:

1. Обслуживается ли этот скрипт через HTTPS?

2. @esqew нет, это не так, я использую расширение сервера liver для VS code. Это не приходило мне в голову. Спасибо, чувак, ты спасаешь жизнь! Вы хотите отправить его в качестве ответа, чтобы я мог пометить его как правильный?

Ответ №1:

Согласно документации MDN, window.showOpenFilePicker , FileSystemFileHandle , и FileSystemWritableFileStream поддерживаются только в безопасных контекстах:

Безопасный контекст

Эта функция доступна только в защищенных контекстах (HTTPS), в некоторых или во всех поддерживающих браузерах.

Насколько я понимаю, расширение «Live Server» для VS Code не будет соответствовать этому требованию, но консоль разработчика будет.