时间戳

首页 > 解决方案 > 一键提交两个表单的问题

node.js - 一键提交两个表单的问题

问题描述

我正在尝试使用一个提交按钮（使用 ajax）将两个表单提交到 node.js 服务器中的两个不同路由。第一种形式是图片，第二种形式是图片的细节。第一种形式在向其路由发出请求时显示“HTTP 500（内部服务器错误）”，而第二种形式显示“net::ERR_EMPTY_RESPONSE”。图片要上传到 cloudinary，所以我已经使用他们的 API 进行了一些配置，我也在使用 EJS 模板。图片在没有ajax的情况下成功上传到cloudinary，但我需要ajax来上传图片和它的详细信息。我不知道我到底做错了什么，任何帮助将不胜感激。

'ejs'

<form enctype = 'multipart/form-data' id = 'formone'>
    <input type = 'file' id = 'photo' name = 'image'/>
</form>

<form id = 'formtwo'> 
    <p>Department: <input type = "text" id = "department" name = "department" placeholder = "Department"/></p>
     <p>Course Code: <input type = "text" id = "course_code" name = "course_code" placeholder = "Course Code"/></p>
     <p>Course Name: <input type = "text" id = "course_name" name = "course_name" placeholder = "Course Name"/></p>
     <p>Year: <input type = "number" id = "year" name = "year" placeholder = "Year"/></p> 
</form>

<input type = "submit" name = "submit" id = "submit"/>

'ajax'

function submitAction() {
    var form1 = $( '#formone' ).serialize();
    var form2 = $( "#formtwo" ).serialize()

    $.ajax( {
        url: '/api/images',
        type: 'POST',
        dataType: "image/jpg",
        data: form1
    } );

    $.ajax( {
        url: '/imagedetails',
        type: 'POST',
        dataType: "json", 
        data: form2
    } );
}

'cloudinary config'

cloudinary.config( {
    cloud_name: config.cloudName,
    api_key: config.apiKey,
    api_secret: config.apiSecret
} );

const storage = cloudinaryStorage( {
    cloudinary: cloudinary,
    folder: "pqrepo",
    allowedFormats: ["jpg", "png"],
    transformation: [{ width: 2000, height: 2000, crop: "limit" }]
} );

const parser = multer( { storage: storage } );

'/api/images route'

app.post( '/api/images', parser.single( "image" ), ( req, res ) => {
    console.log( req.file );

    var events = JSON.parse( JSON.stringify( req.file ) );

    var newUpload = new Upload();

    newUpload.url = events.secure_url;
    newUpload.id = events.public_id;
    newUpload.upload_date = events.created_at;

    newUpload.save( function( err, savedObject ) {
        if( err ) {
            res.json( err );
        } else {
            res.redirect( '/uploadsuccess' );
        }
    } );
} );

标签： node.jsajax

解决方案

@slon 修改后的代码：

var picObj = new FormData();
    var dataObj = new FormData();

    var file_data = jQuery( "input[name='image']" ).prop( "files" )[0];

    picObj.append( "photo", file_data );
    dataObj.append( "department", jQuery( "#department" ).val() );
    dataObj.append( "course_code", jQuery( "#course_code" ).val() );
    dataObj.append( "course_name", jQuery( "#course_name" ).val() );
    dataObj.append( "year", jQuery( "#year" ).val() );
    console.log( "dataObj", dataObj );
    console.log( "picObj", picObj );

    jQuery.ajax( { 
        type: "POST",
        url: "/api/images",
        data: picObj,
        enctype: "multipart/form-data",
        dataType: "json",
        cache: false,
        contentType: false,
        processData: false,
        success: function( res ) {
            console.log( "success", res );
        }, 
        error: function (xhr, errorType, exception) {
            console.log("xhr", xhr);
            console.log("errorType", errorType);
            console.log("exception", exception);
        },
        failure: function (failure) {
            console.log("failure", failure);
        }
    } );

    jQuery.ajax( { 
        type: "POST",
        url: "/imagedetails",
        data: dataObj,
        dataType: "json",
        cache: false,
        contentType: false,
        processData: false,
        success: function( res ) {
            console.log( "success", res );
        }, 
        error: function (xhr, errorType, exception) {
            console.log("xhr", xhr);
            console.log("errorType", errorType);
            console.log("exception", exception);
        },
        failure: function (failure) {
            console.log("failure", failure);
        }
    } );

推荐阅读