Meteor:使用客户端上的FileReader和服务器上的Npm.require(“fs”)上传图像文件

时间:2021-06-08 18:50:22

I'm having some trouble trying to upload an image file to my public/ folder using a standard <input type="file"> element.

我在使用标准的元素将图像文件上传到我的公共/文件夹时遇到了一些麻烦。

So i have this event:

所以我有这个活动:

      "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])

        }

When i do a console.log(reader.result) inside the eventListeners callback, i get an ArrayBuffer object.

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

In my server/server.js file i have this Meteor.method:

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

        saveFile:function(file){

            var fs = Npm.require("fs")

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

                console.log("file saved")

            });

        }

However, the file doesn't get saved and the console never says "file saved". What am i doing wrong here?

但是,文件未保存,控制台永远不会显示“文件已保存”。我在这做错了什么?

2 个解决方案

#1


7  

Try this

尝试这个

//client.js

//client.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){...});

}

Explanation

说明

You read the file as ArrayBuffer, but current DDP can't send it, so you 'convert' it to Uint8Array, then Meteor.call

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

On the server, then you have to convert it by calling new Buffer(buffer) to save it. The '/location' can't be in meteor folder as this will trigger a reload, maybe save it to some TmpDir

在服务器上,您必须通过调用新的Buffer(缓冲区)来保存它。 '/ location'不能在meteor文件夹中,因为这会触发重载,可能会将其保存到某些TmpDir

#2


0  

I think 'fs' is a native nodejs's module. Simply try to requiring it this way: var fs = require('fs')

我认为'fs'是本地nodejs的模块。只需尝试以这种方式要求:var fs = require('fs')

#1


7  

Try this

尝试这个

//client.js

//client.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){...});

}

Explanation

说明

You read the file as ArrayBuffer, but current DDP can't send it, so you 'convert' it to Uint8Array, then Meteor.call

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

On the server, then you have to convert it by calling new Buffer(buffer) to save it. The '/location' can't be in meteor folder as this will trigger a reload, maybe save it to some TmpDir

在服务器上,您必须通过调用新的Buffer(缓冲区)来保存它。 '/ location'不能在meteor文件夹中,因为这会触发重载,可能会将其保存到某些TmpDir

#2


0  

I think 'fs' is a native nodejs's module. Simply try to requiring it this way: var fs = require('fs')

我认为'fs'是本地nodejs的模块。只需尝试以这种方式要求:var fs = require('fs')