fs.opensync不是函数

Question

[我正在尝试在本地计算机上的我的应用程序中使用image-size，并且当我尝试获取.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)

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

Answer 1

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

浏览器没有像Node那样提供对计算机文件系统的访问，因此浏览器中没有fs模块。

Answer 2

如果您正在编写node.js代码（而不是浏览器JS），则如果文件顶部未包含“ fs”模块，则可能会出现该错误。您可能需要添加：const fs = require("fs");

[如果要使用执行浏览器的JS获取图像的尺寸，可以进行提取，但是只需创建一个新图像就更容易了：

var img = new Image();

img.onload = function(){
  var height = img.height;
  var width = img.width;

  console.log(`HxW ${height}x${width}`);
}

img.src = 'https://i.ytimg.com/vi/OwF3alPebO8/maxresdefault.jpg';