我有一个需求,需要使用纯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