javascript - Meteor:在客户端使用 FileReader 上传图像文件，在服务器上使用 Npm.require ("fs")

Question

我在尝试使用标准 <input type="file"> 将图像文件上传到我的 public/文件夹时遇到了一些问题元素。

所以我有这个事件:

      "change .logoBusinessBig-upload":function(event, template){

            var reader = new FileReader()

            reader.addEventListener("load", function(){

                Meteor.call("saveFile", reader.result)

            })

            reader.readAsArrayBuffer(event.currentTarget.files[0])

        }

当我在 eventListeners 回调中执行 console.log(reader.result) 时，我得到一个 ArrayBuffer 对象。

在我的 server/server.js 文件中，我有这个 Meteor.method:

        saveFile:function(file){

            var fs = Npm.require("fs")

            fs.writeFile('message.jpg', file, function (err) {

                console.log("file saved")

            });

        }

但是，文件不会被保存，控制台也不会显示“文件已保存”。我在这里做错了什么？

Answer 1

试试这个

//客户端.js

'change .logoBusinessBig-upload': function(event, template) {

    var file = event.target.files[0]; //assuming you have only 1 file
    if (!file) return;

    var reader = new FileReader(); //create a reader according to HTML5 File API

    reader.onload = function(event){          
      var buffer = new Uint8Array(reader.result) // convert to binary
      Meteor.call('saveFile',buffer);
    }

    reader.readAsArrayBuffer(file); //read the file as arraybuffer
}

//server.js

'saveFile': function(buffer){
    var fs = Npm.require("fs");
    fs.writeFile('/location',new Buffer(buffer),function(error){...});

}

解释

您将文件读取为 ArrayBuffer，但当前 DDP 无法发送它，因此您将其“转换”为 Uint8Array，然后使用 Meteor.call

在服务器上，则必须通过调用 new Buffer(buffer) 进行转换以保存它。 '/location' 不能在 meteor 文件夹中，因为这会触发重新加载，也许将其保存到某个 TmpDir