javascript - AJAX 未将图像上传到后端服务

Question

正在处理将图像上传到 AWS 实例的要求。 UI 和服务是分离的，并通过 REST 连接。服务是在nodejs中。从 UI 中，我们对后端服务进行 ajax 调用，以将图像上传到 AWS。

问题:当我通过 POSTMAN 请求上传图像时，我可以看到该响应与在 AWS 中正​​确上传的文件一起上传。然而，当我通过 AJAX 调用上传图像时，我在浏览器中没有得到任何响应，并且图像也没有上传到 aws 中。

下面是ajax中的一段代码:

var formData = new FormData();
    formData.append('image', $('#tx_file_programa')[0]);

    $.ajax({
        method: 'POST',
        type: "POST",
        url: 'http://10.0.0.95:9999/photo/1',
        contentType: false,
        processData: false,
        async: false,
        cache: false,
        beforeSend: function (xhr) {
            xhr.setRequestHeader('Authorization', 'Bearer ' + access_token );
        },
        data: formData,
        success: function (data) {
            console.log('response from server is : ', data);
        }
        //dataType: 'json'
    });

这是后端服务。

server.post('/photo/:count', function (req, res) {
        if (req.getContentType() == 'multipart/form-data') {
            var form = new formidable.IncomingForm(),
                files = [], fields = [];
            var result = [];
            var noOfFiles = req.params.count;
            var count = 0;
            console.log('noOfFiles', noOfFiles);


            form.on('field', function(field, value) {
                fields.push([field, value]);
                console.log(fields);
            })

            form.on('progress', function(bytesReceived, bytesExpected) {
                console.log('err');
            });

            form.on('error', function(err) {
                console.log('err',err);
            });

            form.on('aborted', function() {
                console.log('aborted', arguments);
            });

            new Promise(function(resolve, reject) {
                var result = [];
                form.onPart = function (part) {
                    var data = null;
                    const params = {
                        Bucket: 'xxxxx',
                        Key: uuidv4() + part.filename,
                        ACL: 'public-read'
                    };

                    var upload = s3Stream.upload(params);

                    upload.on('error', function (error) {
                        console.log('errr', error);
                    });
                    upload.on('part', function (details) {
                        console.log('part', details);
                    });
                    upload.on('uploaded', function (details) {
                        let extension = details.Location.split('.');
                        if(['JPG', 'PNG'].indexOf(extension[extension.length - 1].toUpperCase()) > -1) {
                            var ext = extension[extension.length - 1];
                            count++;
                            result.push(details.Location);
                            if(count == noOfFiles) {
                                resolve(result);
                            }
                        }
                    });
                    part.pipe(upload);
                }
            }).then(function(result){
                console.log('end', result);
                res.writeHead(200, {'content-type': 'text/plain'});
                res.end('received files:\n\n ' + util.inspect(result));
            })
            form.parse(req, function (err, fields, files) {
            })
            return;
        } else {
            BadRequestResponse(res, "Invalid request type!");
        }
    })

Answer 1

@user3336194，你能检查一下吗，这正在工作

var appIconFormData = null

$(":file").change(function () {
    var file = this.files[0], name = file.name, size = file.size, type = file.type;
    var imageType = new Array("image/png", "image/jpeg", "image/gif", "image/bmp");
    if (jQuery.inArray(type, imageType) == -1) {
        return false;
    } else {
        appIconFormData = new FormData();
        appIconFormData.append('appimage', $('input[type=file]')[0].files[0]);
    }
});

$.ajax({
    url: 'your/api/destination/url',
    type: 'POST',
    data: appIconFormData,
    cache: false,
    contentType: false,
    processData: false,
    success: function (data) {
        console.log(data)
    },
    error: function (e) {
    }
});