上传带有文件附件的 FormData

Question

我正在使用 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);
                });
            }
        }
    }
);

我错过了什么？

Answer 1

你缺少[0]：data.append('cocktail_image_file_input',cocktailImageFile[0])

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

上传带有文件附件的 FormData

uploading FormData with file attachment

ajax

jquery

form-data

node.js

restify