fs.opensync 不是函数

Question

我正在尝试在本地计算机上的 React 应用程序中使用 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 (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 (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 模块。

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';

fs.opensync 不是函数

fs.opensync is not a function

javascript

image-size

reactjs