使用 Express JS 和 Parse 云托管的图像上传问题答案

【问题标题】：Issues in image upload using Express JS and Parse Cloud hosting使用 Express JS 和 Parse 云托管的图像上传问题
【发布时间】：2015-02-28 17:52:36
【问题描述】：

我正在使用托管在 Parse 上的 Cloud Code 和 Express 来上传图像。

这是 Parse 日志中的错误：

 I2015-01-03T13:35:55.199Z] TypeError: Cannot read property 'thumbnail' of undefined
    at app.js:40:25
    at callbacks (express_router.js:161:37)
    at param (express_router.js:135:11)
    at pass (express_router.js:142:5)
    at Router._dispatch (express_router.js:170:5)
    at Object.router (express_router.js:33:10)
    at next (connect_proto.js:240:15)
    at Object.expressInit [as handle] (express_middleware.js:31:5)
    at next (connect_proto.js:240:15)
    at Object.query [as handle] (connect_query.js:44:5)

Express JS/Parse 似乎无法理解 req.files.XXX。 app.js 在以下行出现错误：console.error(req.files.thumbnail.size);

此外，req.files 打印以下错误：未提供消息

这里是 recipecontent.ejs 代码：

<!DOCTYPE html>
<html>
<form method="post" enctype="multipart/form-data" action="/saverecipecontent">
  Enter Recipe Image 1:
  <input type="file" name="thumbnail" id="thumbnail">
  <input type="submit">
</form>

</html>

这里是 app.js 代码：

// These two lines are required to initialize Express in Cloud Code.
var express = require('express');
var app = express();

// Global app configuration section
app.set('views', 'cloud/views'); // Specify the folder to find templates
app.set('view engine', 'ejs'); // Set the template engine

app.use(express.bodyParser()); // Middleware for reading request body
app.get('/recipecontent', function(req, res) {

  res.render('recipecontent', {
    recipe_name: 'e.g. Rice Cake'
  });
});

app.post('/saverecipecontent', function(req, res) {

  console.error(req.files.thumbnail.size);
  console.error(req.files.thumbnail.path);
  console.error(req.files.thumbnail.name);
  console.error(req.files.thumbnail.type);


  Parse.Cloud.run('saveRecipeImage', req.body, {
    success: function(result) {
      // result is 'Hello world!'

    },
    error: function(error) {

    }
  });
});
// Attach the Express app to Cloud Code.
app.listen();

最后是main.js代码：

  require('cloud/app.js');
  Parse.Cloud.define("saveRecipeImage", function(request, response) {

    var recipeContent = Parse.Object.extend("recipe_content");
    var recipeContentObj = new recipeContent();

    console.error(request.params);

    var file = request.params.thumbnail;

    var name = "photo.jpg";

    var parseFile = new Parse.File(name, file);

    parseFile.save().then(function(parseFile) {
      // The file has been saved to Parse.
      var url = parseFile.url();

      recipeContentObj.set("recipe_imgurl1", url);

      return recipeContentObj.save();

    }, function(error) {
      // The file either could not be read, or could not be saved to Parse.

    });


  });

请帮忙！

【问题讨论】：

在 save 调用上设置错误处理程序，以便您可以捕获和检查阻止 save 返回可实现的 Promise 对象的错误。
Express JS/Parse 似乎无法理解 req.files.XXX。 app.js 在以下行出现错误：console.error(req.files.thumbnail.size);
req.files 打印以下错误：未提供消息

标签： javascript express parse-platform image-uploading forms http-post

【解决方案1】：

我在 Parse 中提出了这个 bug，这是更新：

我们支持 express.js 的中间件不支持文件上传。

您可以改为将文件内容以 base64 格式发送到您的端点，并根据该数据创建 Parse.File 对象。

这是使用文件内容作为 base64 到端点并创建 Parse.File 对象的更新代码：

这是 layout.ejs 代码

< html >
  < head >
  < script src = "//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" > < /script>
     <script src="/ / cdnjs.cloudflare.com / ajax / libs / underscore.js / 1.4.4 / underscore - min.js "></script>
    <!--  <% if (locals.title) { %> -->
       <!-- <title><%= title %></title>
     <% } else { %>
       <title>AnyImg</title>
     <% } %> -->
     <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
     <script src=" / javascripts / backbone.js "></script>
     <script src="
https: //www.parsecdn.com/js/parse-1.2.8.min.js"></script>
  < script >
  Parse.initialize("n47hKoBkN2vbAAjIPd8rj6Dnc9P6zKYIlXvlZo3x", "a960Z8aOzTNOaKMUcvDQ7lvzT2v2VTHABh6lAdNx"); < /script>
     <script type="text/javascript
" src=" / javascripts / main.js "></script>
  </head>

  <body>
    <div id="
content ">
      <div id="
bar ">
        <h1>File Upload</h1>
      </div>
      
      <div id="
main ">
            <form id="
upload ">
              <div class="
outer ">
                <div>
                  <input type="
text " name="
title " placeholder="
Untitled " />
                  <input id="
asd " type="
file " />
                </div>
              </div>
          </form>
          <img id="
img " src="
" />
          <div id="
base "></div>

      </div>
    </div>
  </body>
</html>

// These two lines are required to initialize Express in Cloud Code.
var express = require('express');
var app = express();

// Global app configuration section
app.set('views', 'cloud/views'); // Specify the folder to find templates
app.set('view engine', 'ejs'); // Set the template engine


app.use(express.json());
app.use(express.urlencoded());

app.get('/', function(req, res) {

  res.render('layout', {
    recipe_name: 'e.g. Rice Cake'
  });
});

app.post('/newUploadImage', function(req, res) {


  var file = new Parse.File("logo.png", {
    base64: req.body.image
  });

  file.save().then(function() {
    console.log("file saved");

    console.log(file.url());

  });
  if (req.params.image) {
    console.log("data found12345");
  }

});
app.listen();

这里是图片js

var base64Data;
var imageName = '';

function readImage(input) {
  if (input.files && input.files[0]) {
    imageName = input.files[0].name;
    var FR = new FileReader();
    FR.onload = function(e) {
      $('#img').attr("src", e.target.result);
      $('#base').text(e.target.result);
      base64Data = e.target.result;
      var datObj = {
        image: e.target.result,
        name: imageName
      };
      var test = {
        image: '12sds'
      };
      $.ajax({
        type: "POST",
        data: datObj,
        url: '/newUploadImage',
        dataType: "json",
        success: function(msg) {
          alert(msg.url);
          console.log();

        },
        error: function(errormsg) {
          console.log(errormsg);
          alert("Sorry, there was an error uploading the image.");
        }
      });

    };
    FR.readAsDataURL(input.files[0]);
  }
}



$(function() {
  // Make all of special links magically post the form
  // when it has a particular data-action associated

  $("#asd").change(function() {

    readImage(this);
    alert('Test');

  });


});

谢谢！

【讨论】：

这真的很有帮助，我使用相同的逻辑上传其他文件类型进行解析，效果很好。谢谢！！！

【解决方案2】：

您似乎正在尝试使用 body-parser 中间件来解析 multipar 主体，但正如 github page of body-parser 本身所述：

这不处理多部分实体，因为它们的复杂性和通常是大型自然。

您需要另一个解析器来处理多部分正文。我建议你multer，但还有很多其他可用的。

【讨论】：

谢谢，您可以在 Parse 云中间件中添加 multer 吗？
如果 Parse 对官方支持的中间件设置了一些限制，您可以将中间件本身的源代码放入您的代码中（如果中间件的许可允许您这样做）。