【问题标题】:Node.JS file upload not retaining files current state on uploadNode.JS 文件上传不保留上传时的文件当前状态
【发布时间】:2016-12-24 15:21:31
【问题描述】:

我有一个 Node.js 服务器端脚本,它成功地将“某物”上传到指定目录。但这不是我选择的文件,并且脚本错误指出:

 Request received: POST
 undefined:1
 ------WebKitFormBoundary1urLweAWe6T1VpEA
 ^

SyntaxError: Unexpected number
at Object.parse (native)
at IncomingMessage.<anonymous> (C:\Users\gcampbell\De
p.js:51:33)
at emitOne (events.js:82:20)
at IncomingMessage.emit (events.js:169:7)
at readableAddChunk (_stream_readable.js:153:18)
at IncomingMessage.Readable.push (_stream_readable.js
at HTTPParser.parserOnBody (_http_common.js:124:22)

这是我在上传目录中最终得到的文件。

upload_3b2ab28a59131c95015a90a4afe972cd

这是我的 NODE.JS 应用程序的一部分:

var http = require('http');
var fs = require('fs');
var path = require('path');
var formidable = require('formidable');
var fs = require('fs');

http.createServer(function(req, res) {

    console.log('Request received: ' + req.method);

    if (req.method == 'GET') {
        fs.readFile("comments-data.json", 'utf8', function(err, data) {
            if (err) {
                return console.log(err);
            } else {
                res.setHeader("Content-Type", "text/json");
                res.setHeader("Access-Control-Allow-Origin", "*");
                res.end(data)
            }
        })
    };
    if (req.method == 'POST') {
            // create an incoming form object
          var form = new formidable.IncomingForm();

          // specify that we want to allow the user to upload multiple files in a single request
          form.multiples = true;

          // store all uploads in the /uploads directory
          form.uploadDir = path.join(__dirname, '/uploads');

          // every time a file has been uploaded successfully,
          // rename it to it's orignal name
          form.on('file', function(field, file) {
            fs.rename(file.path, path.join(form.uploadDir, file.name));
          });

          // log any errors that occur
          form.on('error', function(err) {
            console.log('An error has occured: \n' + err);
          });

          // once all the files have been uploaded, send a response to the client
          form.on('end', function() {
            res.end('success');
          });

          // parse the incoming request containing the form data
          form.parse(req);
        req.on('data', function(chunk) {
            var element = JSON.parse(chunk);
            fs.readFile("comments-data.json", 'utf8', function(err, json) {
                var array = JSON.parse(json);
                array.push(element);
                fs.writeFile("comments-data.json", JSON.stringify(array), function(err) {
                    if (err) {
                        console.log(err);
                        return;
                    }
                    console.log("The file was saved!");
                });
            });
            res.end('{"msg": "success"}');
        });
    };

这是我的 AJAX 调用:

                uploadAttachments: function(commentArray, success, error) {
                        var responses = 0;
                        var successfulUploads = [];

                        var serverResponded = function() {
                            responses++;

                            // Check if all requests have finished
                            if(responses == commentArray.length) {

                                // Case: all failed
                                if(successfulUploads.length == 0) {
                                    error();

                                // Case: some succeeded
                                } else {
                                    success(successfulUploads)
                                }
                            }
                        }

                        $(commentArray).each(function(index, commentJSON) {

                            // Create form data
                            var formData = new FormData();
                            $(Object.keys(commentJSON)).each(function(index, key) {
                                var value = commentJSON[key];
                                if(value) formData.append(key, value);
                            });

                            $.ajax({
                                url: 'http://localhost:8080',
                                type: 'POST',
                                data: formData,
                                cache: false,
                                contentType: false,
                                processData: false,
                                success: function(commentJSON) {
                                    successfulUploads.push(commentJSON);
                                    serverResponded();
                                },
                                error: function(data) {
                                    serverResponded();
                                },
                            });
                        });
                    }

这应该接受 POST,存储文件并更新 cmets-data.json 文件中的 JSON 数据以指定新文件的去向。

提前致谢!

ajax 请求是一个回调函数,用于将附件上传到服务器。回调的第一个参数是commentArray,包括所有附件作为评论模型,其中文件字段包含要上传的文件。服务器应在 fileURL 字段中返回上传文件的 url。回调提供了成功和错误回调,它们应该根据服务器的结果调用。成功回调将成功上传的数组作为参数。

【问题讨论】:

  • 还有什么可以帮忙的吗?

标签: javascript ajax node.js file-upload


【解决方案1】:

经常出现错误undefined:1 表示您尝试解析不正确的 JSON。解析非安全数据时始终使用try-catch,例如通过浏览器。

req.on('data', function(chunk) {
   var element; 
   try {
       element = JSON.parse(chunk);
   } catch(err) {
       return // res status 500, console.log(err), smth-else
   }

   fs.readFile("comments-data.json", 'utf8', function(err, json) {
       // here safety data
       var array = JSON.parse(json);
       array.push(element);
       fs.writeFile("comments-data.json", JSON.stringify(array), function(err) {
           if (err) 
               return console.log(err);

           console.log("The file was saved!");
        });
    });
});

尝试从表单中获取数据

$.ajax({
    type: 'POST',
    url: '/',
    data: new FormData($('#your-form-id')[0]),
    processData: false,
    ...

【讨论】:

  • 我很欣赏尝试的建议,很好保存。另外,对于我的 ajax 请求,我使用的是 jquery 插件 - cmets。因此,它不是一个真正的表单,也没有一个“表单 ID”,您还有其他建议吗?
猜你喜欢
  • 2014-12-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-03-21
  • 2011-07-09
  • 2021-07-03
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多