Метод createWritable() 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 ответ

Решение

Согласно документации MDN, <tcode id="289803"></tcode>, <tcode id="289804"></tcode>, и <tcode id="289805"></tcode> поддерживаются только в безопасных контекстах:

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

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

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

Источник
Другие вопросы по тегам