Image Upload using fs.writeFile() shows corrupt Images

问题

I am facing a issue while uploading the image to Meteor's /public folder. The Flow works flawless, only the thing is the images are corrupt.

X.html

<form class="documentForm" enctype="multipart/form-data">
    <label for="signature">Upload image of Signature</label>
    <input type="file" name="signature" id="signature" required>

    <label for="panCard">Upload image of Pan Card Only.</label>
    <input type="file" name="panCard" id="panCard" required>

    <button class="btn btn-primary" type="submit">Upload</button>
    <button class="btn btn-warning" id="reset">Reset</button>
</form>

X.js

'submit .documentForm': function(event, template){
    event.preventDefault();
    console.log(event.target.signature.files[0]);
    var signatureImage = event.target.signature.files[0];
    var panCardImage = event.target.panCard.files[0];
    Meteor.call('upload', signatureImage, panCardImage, function(error, response){
      if(error){
        Bert.alert("<strong>Error !</strong> Some Problem occured while submitting documents.", 'danger', 'fixed-top' );
      } else if(response){
        Bert.alert("<strong>Success !</strong> Documents uploaded.", 'success', 'fixed-top' );
      }
    });
    return false;
}

Meteor.method();

'upload'(signatureImage, panCardImage){
    const fs = Npm.require('fs');
    var signatureFileName = Meteor.userId() + "_signature.jpg";
    var panCardFileName = Meteor.userId() + "_pancard.jpg";
    var path = process.env['METEOR_SHELL_DIR'] + '/../../../public/img/userdocuments/';
    /*var encoding = {encoding: 'binary'};*/
    fs.writeFile(path + signatureFileName, signatureImage, Meteor.bindEnvironment(function (err) {
        if (err) {
            log.error(err);
        } else {
            log.debug("Signature upload - " + Meteor.userId());
        }
    }));
    fs.writeFile(path + panCardFileName, panCardImage, Meteor.bindEnvironment(function (err) {
        if (err) {
            log.error(err);
        } else {
            log.debug("Pan Card upload - " + Meteor.userId());
        }
    }));
    return true;

why my image is corrupt? what should I do to rectify my mistake?

回答1:

You can't (or shouldn't - you choose) add files to the /public folder, for a number of reasons...

In development meteor will restart - this may be causing the corruption
The location of /public at run time is not the same as where your source is.
The file system where the meteor code is deployed is likely to be read only on the production system
On mobile platforms you don't have easy access to save files on the device, and the space is limited

While it is technically possible to define a location on the file system where your app can save files, and then either symlink this location in so that it's somewhere under /public, or run another express server just to serve up those files, it's not really best practice.

You should either look to store your uploaded files on a service such as AWS S3, or store them in the Mongo database. There are several packages which can help you achieve this, off the top of my head ostrio:files, vsivsi:file-collection and jalik:ufs

来源：https://stackoverflow.com/questions/44906248/image-upload-using-fs-writefile-shows-corrupt-images

标签

javascript

node.js

meteor

ecmascript-6