javascript - fs.opensync 不是一个函数

Question

我正在尝试使用 image-size在我本地计算机上的 React 应用程序中，当我尝试获取 .jpg 图像的尺寸时，应用程序因错误而崩溃:

TypeError: fs.openSync is not a function

syncFileToBuffer
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/node_modules/image-size/dist/index.js:118
  115 | 
  116 | function syncFileToBuffer(filepath) {
  117 |   // read from the file, synchronously
  118 |   const descriptor = fs.openSync(filepath, 'r');
  119 |   const size = fs.fstatSync(descriptor).size;
  120 |   const bufferSize = Math.min(size, MaxBufferSize);
  121 |   const buffer = Buffer.alloc(bufferSize);

imageSize
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/node_modules/image-size/dist/index.js:151
  148 |   if (typeof callback === 'function') {
  149 |     queue.push(() => asyncFileToBuffer(filepath).then(buffer => process.nextTick(callback, null, lookup(buffer, filepath))).catch(callback));
  150 |   } else {
  151 |     const buffer = syncFileToBuffer(filepath);
  152 |     return lookup(buffer, filepath);
  153 |   }
  154 | }

calcDimensions
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/src/pages/home/index.js:53
  50 |    }
  51 | 
  52 |    const calcDimensions = () => {
  53 |        var dimensions = sizeOf('../../img/arts_hd_folder/1.jpg');
     | ^  54 |        console.log(dimensions.width, dimensions.height);
  55 | 
  56 |    }

(anonymous function)
D:/Projects/artworks-portfolio-app/ArtworkPortfolioApp/src/pages/home/index.js:60
  57 | 
  58 |     useEffect(() => {
  59 | 
  60 |        calcDimensions();
     | ^  61 |        setPhotos(makeImgArray(imgLinks))
  62 |    }, []);
  63 | 

来自浏览器控制台的错误:

Uncaught TypeError: fs.openSync is not a function
    at syncFileToBuffer (index.js:118)
    at imageSize (index.js:151)
    at calcDimensions (index.js:53)
    at index.js:60
    at commitHookEffectList (react-dom.development.js:22010)
    at commitPassiveHookEffects (react-dom.development.js:22043)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at flushPassiveEffectsImpl (react-dom.development.js:25379)
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushPassiveEffects (react-dom.development.js:25348)
    at react-dom.development.js:25227
    at workLoop (scheduler.development.js:645)
    at flushWork (scheduler.development.js:600)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:197)

index.js:1406 The above error occurred in the <Home> component:
    in Home (created by Context.Consumer)
    in Route (at app/index.js:17)
    in Switch (at app/index.js:16)
    in div (at app/index.js:14)
    in Router (created by BrowserRouter)
    in BrowserRouter (at app/index.js:13)
    in App (at src/index.js:5)

index.js:118 Uncaught TypeError: fs.openSync is not a function
    at syncFileToBuffer (index.js:118)
    at imageSize (index.js:151)
    at calcDimensions (index.js:53)
    at index.js:60
    at commitHookEffectList (react-dom.development.js:22010)
    at commitPassiveHookEffects (react-dom.development.js:22043)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at flushPassiveEffectsImpl (react-dom.development.js:25379)
    at unstable_runWithPriority (scheduler.development.js:701)
    at runWithPriority$2 (react-dom.development.js:12231)
    at flushPassiveEffects (react-dom.development.js:25348)
    at react-dom.development.js:25227
    at workLoop (scheduler.development.js:645)
    at flushWork (scheduler.development.js:600)
    at MessagePort.performWorkUntilDeadline (scheduler.development.js:197)

我一直在尝试此库存储库中的不同代码示例，但没有任何效果。我想我只是忘了做一些简单的事情，但我不知道是什么。

Answer 1

它似乎是一个专用于服务器端 Node.js 应用程序的模块。

浏览器无法像 Node 那样提供对计算机文件系统的访问权限，因此浏览器中不存在 fs 模块。