javascript - Node.js + ajax, uploading a file - Stack Overflow

admin管理员组

文章数量:1291639

I've been trying to upload a file with node.js and ajax, yet i can't let it work. I don't get an error, but nothing is in my storage folder.

index.js:

app.post('/newFlavour', function(req, res){
console.log("[INFO] New flavour request: " + req.body.name);

let form = new formidable.IningForm();
form.uploadDir = path.join(__dirname, '/storage');

form.on('file', function(field, file) {
    fs.rename(file.path, path.join(form.uploadDir, file.name));
});

form.on('error', function(err) {
    console.log('An error has occured: \n' + err);
});

form.on('end', function() {
    console.log('success');
});

form.parse(req); });

My function with the ajax request:

function createFlavour() {
let file = $('#upload-input').get(0).files;
const formData = new FormData();
formData.append('uploads', file, file.name);

console.log(file)

$.ajax({
    url: "http://localhost:3000/newFlavour",
    type: "POST",
    dataType: "json",
    data: JSON.stringify({
        name: $('#name').val(),
        file: file
    }),
    contentType: "application/json",
    success: function (data) {
        console.log(data);
    },
    error: function () {
        alert("Error occured");
    },
    plete: function () {
        console.log("plete")
    }
});

clearModal();  }

The input tag:

<input id="upload-input" type="file" name="upload"></br>

I don't know what i am missing here.

Thanks in advance!

I've been trying to upload a file with node.js and ajax, yet i can't let it work. I don't get an error, but nothing is in my storage folder.

index.js:

app.post('/newFlavour', function(req, res){
console.log("[INFO] New flavour request: " + req.body.name);

let form = new formidable.IningForm();
form.uploadDir = path.join(__dirname, '/storage');

form.on('file', function(field, file) {
    fs.rename(file.path, path.join(form.uploadDir, file.name));
});

form.on('error', function(err) {
    console.log('An error has occured: \n' + err);
});

form.on('end', function() {
    console.log('success');
});

form.parse(req); });

My function with the ajax request:

function createFlavour() {
let file = $('#upload-input').get(0).files;
const formData = new FormData();
formData.append('uploads', file, file.name);

console.log(file)

$.ajax({
    url: "http://localhost:3000/newFlavour",
    type: "POST",
    dataType: "json",
    data: JSON.stringify({
        name: $('#name').val(),
        file: file
    }),
    contentType: "application/json",
    success: function (data) {
        console.log(data);
    },
    error: function () {
        alert("Error occured");
    },
    plete: function () {
        console.log("plete")
    }
});

clearModal();  }

The input tag:

<input id="upload-input" type="file" name="upload"></br>

I don't know what i am missing here.

Thanks in advance!

• javascript
• jquery
• node.js
• ajax

Share Improve this question Follow asked Dec 19, 2017 at 15:50 user6361185user6361185 1

• 1 I don't get an error, or maybe you do.. Your silently ignoring any errors in 2 places I can see,.. one on your fs.rename, and again on the form.parse,.. get the error handling sorted and it might give you a clue to the problem. – Keith Commented Dec 19, 2017 at 15:55

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

You should parse your req at the start. Also per formidable documentation

fileBegin

Emitted whenever a new file is detected in the upload stream. Use this event if you want to stream the file to somewhere else while buffering the upload on the file system.

form.on('fileBegin', function(name, file) { });

so doing this should save your file

app.post('/newFlavour', function (req, res){
    var form = new formidable.IningForm();

    form.parse(req);

    form.on('fileBegin', function (name, file){
        file.path = __dirname + '/storage/' + file.name;
    });

    form.on('file', function (name, file){
        console.log('Uploaded ' + file.name);
    });

    res.status(200);
});

Also you ajax Post is wrong, this should work

    var data = new FormData();
    $.each($('#upload-input')[0].files, function(i, file) {
        data.append('file-'+i, file);
    });

    $.ajax({
        url: 'http://localhost:3000/newFlavour',
        data: data,
        cache: false,
        contentType: false,
        processData: false,
        method: 'POST',
        type: 'POST', // For jQuery < 1.9
        success: function(data){
            alert(data);
        }
    });

本文标签： javascriptNodejsajaxuploading a fileStack Overflow