node.js - 如何在瀏覽器環境中使用node的fs模組?
高洛峰
高洛峰 2017-05-16 13:44:07
0
2
1303

我有一個需求,需要用純js讀取圖片,參數只有圖片路徑,下面是node環境中的程式碼

var fs = require("fs");
var imageFile = fs.readFileSync('test.png', 'base64');
console.log(imageFile);

使用browserify轉換成

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){

},{}],2:[function(require,module,exports){
var fs = require("fs");
var imageFile = fs.readFileSync('test.png', 'base64');
console.log(imageFile);
},{"fs":1}]},{},[2]);

在瀏覽器環境中運行提示,如下錯誤,貌似browserify並不能將fs模組轉成能在瀏覽器中運行,本來在瀏覽器中讀取文件就是一項難題(如果不借助任何html表單的話)
bundle.js:5 Uncaught TypeError: fs.readFileSync is not a function

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(2)
Ty80

文件閱讀器?

仅有的幸福

首先明確一點,類似 browserify 这样的工具仅仅能将使用 commonjs 模組載入機制的 JavaScript 程式碼轉換成為瀏覽器可以理解的形式。這並不代表任意 Node.js 程式碼都可以在瀏覽器端使用。

最典型的例子就是 fs 模組,它是完全不可能被瀏覽器端呼叫的。對本地文件的讀寫能力完全違反了瀏覽器本身的安全機制,試想你打開一個網頁,然後這個網頁竟然就可以讀寫你本地硬碟上的文件,這該是多麼可怕的一件事情!

因此,你的思路本身或許需要重新整理一下,什麼樣的功能需求促使你要在網頁端讀寫文件呢?如果只是在客戶端對使用者在 file uploader 中上传的文件预处理,那么你该使用浏览器端原生的 FileReader API

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板