Question

我有一个使用NodeJS + Express + JQuery + Typescript的项目。我正在从前端上传一个成功发生的文件。但是，我无法将JSON对象从服务器返回到包含服务器上对象位置的客户端。当JSON数据返回到客户端时，它实际上在屏幕上呈现（JSON）而不是由客户端上的"success: function (response)"函数接收。

这是客户端代码：

function sendFile() {

    $(new ID().setAsRoot().selectId()).append(
        "<form id=\"fileUploadForm\" accept-charset=\"utf-8\" method=\"post\" action=\"/upload\" enctype=\"multipart/form-data\">" +
            "<input id = \"filename\" type=\"file\" name=\"userfile\" multiple=\"multiple\" />" +
            "<button type=\"submit\"> Upload </button></form>");

    var $form = $("#fileUploadForm");
    $form.submit(function (e) {

        alert("Upload Started");
        // perform client side validations if any

        this.ajaxSubmit({
            error: function () {
                alert("Error");
            },

            success: function (response) {
                alert("Success " + JSON.parse(response));
            }
        });

        // Important: stop event propagation
        return false;
    });
}

这是服务器端代码：

app.post('/upload', function(request, response){
    var upload = new uploadModule.Upload();
    upload.upload(request, response);
});


    public upload(req:express.Request, res) {
        var form = new formidable.IncomingForm();
        var originalFileName:String;
        var filePath:String;
        form.uploadDir = this.directory;
        form.keepExtensions = true;
        form.type = 'multipart';
        var fields = [];
        form
            .on("error", function (err) {
                //res.writeHead(200, {'content-type': 'text/plain'});
                //res.end('error:\n\n' + util.inspect(err));
            })
            .on("field", function (field, value) {
                //console.log(field, value);
                //fields.push([field, value]);
            })
            .on("end", function () {
                //console.log('-> post done');
                //res.writeHead(200, {'content-type': 'text/plain'});
                //res.end('received fields:\n\n ' + util.inspect(fields));
                res.send({
                    path : filePath,
                    name : originalFileName
                });
            })
            .on("file", function(name, file:formidable.File){
                originalFileName = file.name;
                filePath = file.path;
            });
        form.parse(req);
        return;
    }

---更新---

我在Chrome控制台中看到了这些错误，我不知道它们的含义：

Uncaught SyntaxError: Unexpected token : shortcut_manager.js:123
(anonymous function) shortcut_manager.js:123
(anonymous function) extensions::messaging:327
Event.dispatchToListener extensions::event_bindings:386
Event.dispatch_ extensions::event_bindings:371
Event.dispatch extensions::event_bindings:392
dispatchOnMessage extensions::messaging:294
Uncaught SyntaxError: Unexpected token o Server.ts:21
$.ajax.success Server.ts:21
c jquery.js:3048
p.fireWith jquery.js:3160
k jquery.js:8235
r jquery.js:8778

我使用JQuery表单插件进行文件上传，插件的js文件似乎没有在Chrome中下载。我也使用require JS，其中我已经包含了表单插件。

require(["//malsup.github.io/min/jquery.form.min.js"]);

Answer 1

从您的描述看来，没有进行AJAX调用，但表单正常上传。 ajaxSubmit（）不是标准的jQuery函数。使用一些jQuery插件？插件是否已加载？

成功上传文件后，无法将JSON对象从服务器返回到客户端

1 个答案: