fs.writeFile 无法解析

Question

我正在尝试在 Electron 应用程序中使用 fs 将画布中的图像保存到磁盘上的文件中。我正在使用 async/await 但只要调用该函数，我就会看到文件已创建，但在刷新页面之前没有数据写入其中。 console.log('Saved') 行直到刷新才会执行。

import { promises as fs } from 'fs';
  async capture() {
    this.canvas = this.$refs.canvas;
    const context = this.canvas.getContext("2d").drawImage(this.video, 0, 0, 1280, 720);
    const image = canvas.toDataURL("image/png");


    const data = image.replace(/^data:image\/\w+;base64,/, "");
    const buf = Buffer.from(data, 'base64');
    try {

      await fs.writeFile(`${this.prescriptionId}.png`,buf);
      console.log('Saved')
    } catch (error) {
      console.log(error)
    }

  },

我不完全确定我做错了什么，有人可以帮忙吗？使用node v12.16.1 不会记录任何错误

更新： 如果我使用 fs.writeFileSync 我会得到一个错误：

TypeError: fs__WEBPACK_IMPORTED_MODULE_3__.promises.writeFileSync is not a function
    at VueComponent._callee4$ (MainPage.vue?23fd:369)
    at tryCatch (runtime.js?96cf:62)
    at Generator.invoke [as _invoke] (runtime.js?96cf:296)
    at Generator.prototype.<computed> [as next] (runtime.js?96cf:114)
    at step (asyncToGenerator.js?0f75:17)
    at eval (asyncToGenerator.js?0f75:35)
    at new Promise (<anonymous>)
    at new F (_export.js?63b6:36)
    at eval (asyncToGenerator.js?0f75:14)
    at VueComponent.capture (MainPage.vue?23fd:359)

Answer 1

你可以试试这个。

import { promises as fs } from 'fs';
const context = 
this.canvas.getContext("2d").drawImage(this.video, 0, 0, 1280, 720);
 const image = canvas.toDataURL("image/png");

const data = image.replace(/^data:image\/\w+;base64,/, "");
const buf = Buffer.from(data, 'base64');
 (async () => {
 try {
   await fs.writeFile(`${this.prescriptionId}.png`,buf);
 console.log('Saved')
 } catch (error) {
 console.log(error)
}
)(this);