上传带有文件附件的 FormData答案

【问题标题】：uploading FormData with file attachment上传带有文件附件的 FormData
【发布时间】：2017-05-05 20:52:11
【问题描述】：

我正在使用 jquery 上传带有文件附件的表单数据。

服务器是一个 jquery restify。我遇到的问题是我将图像文件（称为cocktail_image_file_input）作为字符串获取：这意味着该值是以下字符串：

[object FileList]

我应该在 req.files 中看到它，但我在 req.context.cocktail_image_file_input 中看到它作为常规字符串数据。

我正在尝试使用以下代码发送数据：

$('#finish_cocktail_button').click(
    function () {
        var data = new FormData();
        var cocktailImageFile = $('#cocktail_image_file_input')[0].files;
        if (cocktailImageFile.length == 1) {
            data.append('cocktail_image_file_input',cocktailImageFile);
        }
        var cocktailName = $('#cocktail_name_input').val().trim();
        var cocktailSourceType = $('#cocktail_source_type_select').val();
        var cocktailSourceName = $('#cocktail_source_name_input').val();
        var cocktailSourceDesc = $('#cocktail_source_desc_input').val();
        if (cocktailName.length < 3) {
            alert('please enter a valid cocktail name');
        } else {
            var cocktailSteps = [];
            $('#cocktail_steps_ul li').each(
                function () {
                    var step = [];
                    $('span', this).each(function(){step.push($(this).text())});
                    fullStep = step.join(commandsSplitSign);
                    cocktailSteps.push(fullStep);
                }
            );
            if (cocktailSteps.length < 2) {
                alert('really? less then 2 steps cocktail ?');
            } else {
                data.append('cocktail_name',cocktailName);
                data.append('cocktail_steps',JSON.stringify(cocktailSteps));
                data.append('cocktail_source_type',cocktailSourceType);
                data.append('cocktail_source_name',cocktailSourceName);
                data.append('cocktail_source_desc',cocktailSourceDesc);
                $.ajax({
                    url: 'http://api.myalcoholist.com:8888/cocktail/add_cocktail',
                    crossDomain: true
                    , type: 'POST',
                    enctype: 'multipart/form-data',
                    processData: false,
                        contentType: false
                    , data:data
                }).done(function (data) {
                    alert(data);
                });
            }
        }
    }
);

我错过了什么？

【问题讨论】：

标签： jquery ajax node.js restify form-data

【解决方案1】：

你不见了[0]:data.append('cocktail_image_file_input',cocktailImageFile[0])

这将只选择file 对象，否则您尝试附加FormData 无法识别的FileList 对象。

【讨论】：