1

ajax アップロードを許可するようにコードを調整するのに問題があります。S3 への直接アップロードが機能していますが、ajax を使用してアップロードの進行状況を表示したいと考えています。

js

$('#upload-input').on('change', function(){

var files = $(this).get(0).files;

if (files.length > 0){

    var formData = new FormData();

    for (var i = 0; i < files.length; i++) {
    var file = files[i];

    formData.append('uploads[]', file, file.name);
    }


$.ajax({
    type: 'POST',
    processData: false,
    contentType: false,
    data: formData,
    url: '/upload',
    success : function(data){
    getDetail();
    console.log('picture uploaded ', data);
},
        xhr: function() {
        var xhr = new XMLHttpRequest();
        xhr.upload.addEventListener('progress', function(evt) {

                if (evt.lengthComputable) {

                var percentComplete = evt.loaded / evt.total;
                percentComplete = parseInt(percentComplete * 100);

                $('.progress-bar').text(percentComplete + '%');
                $('.progress-bar').width(percentComplete + '%');

                if (percentComplete === 100) {
                    $('.progress-bar').html('Done');
                }
            }

        }, false);

return xhr;
  }
    });
}
});

バックエンド

変数の設定

var aws = require('aws-sdk');
        aws.config.loadFromPath('./data/s3config.json');
var multer = require('multer');
var multerS3 = require('multer-s3');
var s3 = new aws.S3({});
var upload = multer({
    storage: multerS3({
        s3: s3,
        bucket: 'roe.pictures',
        acl: 'public-read',
        metadata: function (req, file, cb) {
            cb(null, {fieldName: file.fieldname});
        },
        key: function (req, file, cb) {
            cb(null, Date.now().toString())
        }
    })
});

ポストコールの設定

問題は、ファイルを「upload.array」パラメーターに追加する方法がわからないことです。ファイルを HTML フォームから直接ロードすると、入力フィールドの名前をそのまま使用できます。「req」オブジェクトがないため、req.body を使用できません。これを別の関数にラップする必要がありますか?

ありがとう!!

app.post('/upload', upload.array(this.body, 3), function(req, res, next) {
    var newPics = [];

    if(req.files) {
    req.files.forEach(function(p) {
        newPics.push({key : p.key, originalName : p.originalname, mimeType : p.mimetype, size : p.size})
    });

    Room.update({_id : req.signedCookies.prop},
                         { $push: { pPics : { $each : newPics }}})
    .exec(function(err, r) {
        if(err) return err;
        console.log('Successfully uploaded ' + req.files.length + ' files! with result ' + r);
        res.redirect(req.get('referer'));
    });
    } else {
        console.log('nothing to upload');
        res.redirect(req.get('referer'));
    }
});
4

0 に答える 0