Node.js - 使用ajax快速/上传图像

时间:2015-01-14 08:24:37

标签: javascript jquery ajax node.js express

在快递3应用程序中,我有一个简单的文件上传表单,用于使用ajax和Formidable提交图像。

在我的Express版本中,Formidable包含在Connect中间件中。

当我处理文件上传时,只上传了一部分图片,但重量更重要。

示例:

重量 74Ko

的基本影像

base image

处理后的上传图片的权重为 90ko 且未完全加载,如您所见

uploaded image

当我想在我的帖子路径中解析表单时,进程的行为很奇怪,似乎图像被解析了2次

这是js代码

if(document.addEventListener) {
    document.getElementById("upload_event_image").addEventListener("change", function(e){
        uploadImages(e);
    });
}
else {
    document.getElementById("upload_event_image").attachEvent("onchange", function(e){
        uploadImages(e);
    });
}

function uploadImages(e) {

    var formData = new FormData();
    var xhr = new XMLHttpRequest();
    //xhr.dataType = 'json';

    var onReady = function(e) {

        if(this.readyState == this.DONE) {

            if(this.status != 200) {

                console.log('An error occured with the file upload');

            } else {

                var returnedData = JSON.parse(xhr.responseText);

                if(returnedData.response == 'success') {

                    console.log('File uploaded : ' + returnedData.image_name);

                }

            }

        }

    };

    var onError = function(err) {
        // something went wrong with upload
        console.log('Upload error : ' + err);
    };

    formData.append('data', e.target.files[0]);

    xhr.open('post', "/markers/upload_event_image", true);
    xhr.addEventListener('error', onError, false);
    xhr.send(formData);
    xhr.addEventListener('readystatechange', onReady, false);

}

和路线

router.post('/markers/upload_event_image', express.bodyParser({defer: true}), function (req, res) {
    var form = req.form;

    form.encoding = 'binary';
    form.uploadDir = __dirname + '/client/tmp';
    form.maxFieldsSize = 50 * 1024 * 1024;
    form.keepExtensions = true;

    form.parse(req, function(err, fields, files) {

        if (err) return console.log(err); 

    });
});

另一个人认为,如果我使用form.on('file', function(name, file) { ... });代替form.parse...,它会很棒!

0 个答案:

没有答案