我有一個需求,需要用純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
文件閱讀器?
首先明確一點,類似
browserify
这样的工具仅仅能将使用commonjs
模組載入機制的 JavaScript 程式碼轉換成為瀏覽器可以理解的形式。這並不代表任意 Node.js 程式碼都可以在瀏覽器端使用。最典型的例子就是 fs 模組,它是完全不可能被瀏覽器端呼叫的。對本地文件的讀寫能力完全違反了瀏覽器本身的安全機制,試想你打開一個網頁,然後這個網頁竟然就可以讀寫你本地硬碟上的文件,這該是多麼可怕的一件事情!
因此,你的思路本身或許需要重新整理一下,什麼樣的功能需求促使你要在網頁端讀寫文件呢?如果只是在客戶端對使用者在
file uploader
中上传的文件预处理,那么你该使用浏览器端原生的FileReader
API