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) {
    }
});

Answer 2

我认为您发送表单数据的方式不正确。

试试这两种方式：

您可以将整个表单交给 FormData() 进行处理

var form = $('form')[0]; // You need to use standard javascript object here
var formData = new FormData(form);

或为 FormData()

指定准确数据

var formData = new FormData();
// Attach file
formData.append('image', $('input[type=file]')[0].files[0]);

AJAX 没有上传图片到后端服务

AJAX not uploading images to backend service

javascript

ajax

multipartform-data

amazon-s3

node.js