javascript - 向 MongoDB 插入数据并上传图片问题 enctype ="multipart/form-data"-6ren

javascript - 向 MongoDB 插入数据并上传图片问题 enctype ="multipart/form-data"

转载作者：太空宇宙更新时间：2023-11-04 01:53:23

24

4

我正在制作小型上传图像并将数据(名称、图像)插入到 mongoDB 中。我使用 multer 和express来上传图片

我遇到了一个错误。当我在 HTML 表单上添加 enctype= multipart/form-data 时。我的应用程序只能上传图像，但无法将数据(姓名、电子邮件)插入到 mongoDB 中。当我删除它时，我的应用程序只插入数据，但无法上传图像。

我在谷歌上搜索了很多次但无法修复它。

我的 Server.js

var multer  =   require('multer');
var express = require('express');
var http = require('http');
var path = require('path');
var mongoose = require('mongoose');
var app = express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
const {ObjectID} = require("mongodb");
app.set('views',__dirname + '/views');
app.set('view engine','jade');

app.use(bodyParser());
app.use(methodOverride());
//app.use(app.router);
app.use(express.static(path.join(__dirname,'public')));

mongoose.connect('mongodb://localhost:27017/test');
var mySchema = new mongoose.Schema({
    _id : String,
    name: String,
    email : String
});

var user = mongoose.model('face',mySchema);

app.post('/new',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
        res.end("File is uploaded");
    });

    new user({
    _id   :  new ObjectID(),
    name : req.body.name,
    email : req.body.email
}).save(function(err,doc){
    if(err) res.json(err);
    else    res.send('Successfully inserted!');
});
});
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname);
  }
});
var upload = multer({ storage : storage}).single('userPhoto');
app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});
app.listen(3001,function(){
    console.log("Working on port 3001");
});

我的 HTML 代码

<html>
  <head>
    <title>File upload Node.</title>
  </head>
  <body>
    <form action ="/new" method = "POST" enctype="multipart/form-data">
      <input type="file" name="userPhoto" /><br/>
  <label for="name">Name: </label>
   <input type="text" name = "name" /><br/>
  <label for="email">Email:</label>
   <input type = "text" name = "email" /><br/>

   <input type = "submit" />
   </form>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
</html>

最佳答案

您正在将数据保存到数据库之前进行响应。首先上传图像并在发送响应后将数据保存在数据库中。我更正了您的代码如下-

var multer  =   require('multer');
var express = require('express');
var http = require('http');
var path = require('path');
var mongoose = require('mongoose');
var app = express();
var bodyParser = require('body-parser');
var methodOverride = require('method-override');
const {ObjectID} = require("mongodb");
app.set('views',__dirname + '/views');
app.set('view engine','jade');

app.use(bodyParser());
app.use(methodOverride());
//app.use(app.router);
app.use(express.static(path.join(__dirname,'public')));

mongoose.connect('mongodb://localhost:27017/test');
var mySchema = new mongoose.Schema({
    _id : String,
    name: String,
    email : String
});

var user = mongoose.model('face',mySchema);

app.post('/new',function(req,res){
    upload(req,res,function(err) {
        if(err) {
            return res.end("Error uploading file.");
        }
            new user({
             _id   :  new ObjectID(),
             name : req.body.name,
             email : req.body.email
           }).save(function(err,doc){
              if(err) res.json(err);
              else    res.send('Successfully inserted!');
           });
    });


});
var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.originalname);
  }
});
var upload = multer({ storage : storage}).single('userPhoto');
app.get('/',function(req,res){
      res.sendFile(__dirname + "/index.html");
});
app.listen(3001,function(){
    console.log("Working on port 3001");
});

关于javascript - 向 MongoDB 插入数据并上传图片问题 enctype ="multipart/form-data"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48863580/

24

4

0

文章推荐： html - 更改 Django 图片上传字段按钮的背景颜色

文章推荐： python - 名称错误 : name "AnyName" is not defined

文章推荐： python - edgecolors ='None' 导致动画 3d 散点图出错

文章推荐： node.js - 我可以在没有管理员权限的情况下使用 NVM

php - enctype ="multipart/form-data"和 enctype ="multipart/form-data;charset=utf-8"有什么区别
我在表单帖子中遇到了土耳其语字符问题，我在尝试以下代码时遇到问题， // some input 但是当我尝试这个时它工作正常 // some input 为什么会这样？最佳答案在第一个示
html - 为什么使用Form enctype？
用于表单的属性 enctype 是什么？最佳答案它用于指定用于请求的内容类型。 html 表单中使用了 2 种内容类型:application/x-www-form-urlencoded这是默认
php - 带有 enctype 的表单在请求中返回空文件
我试图编辑我商店中的产品。根据要求，缺少 $request->file('image'); 我在下面附上源代码，我真的不知道为什么我在请求中没有收到图片，因为我认为我所做的是正确的我的表格: id)
php - 使用 ENCTYPE 处理表单数据
现在我知道上传文件表单是使用 ENCTYPE="multipart/form-data。但是当我们想通过 php 文件将表单数据传输到 mysql 时，enctpe=""应该是什么？我们可以使用
jsp - 在多部分 enctype 表单中检索多个表单字段参数
我有 2 个普通文本字段和 1 个要解析的上传字段。 Apache Tomcat FileUpload page 中建议的 getFieldName();似乎只得到 input html 标签的名称属
javascript - Ajax 表单提交设置 enctype
这个问题在这里已经有了答案: How can I upload files asynchronously with jQuery? (34 个答案) 关闭 9 年前。我有这个 Js/Ajax 代码
html - 为什么没有 enctype 属性文件上传不起作用？
大多数时候，文件上传错误的根源是我们忘记在 HTML 表单中添加 enctype 属性。一般情况下，我们不需要为常规请求添加enctype属性。但是，我们确实需要在上传文件时将此添加到 HTML 表
wordpress - 如何在 Wordpress 中更改自定义帖子类型的表单 enctype？
我正在创建自定义帖子类型的音乐。 function layzend_admin_music_init() { add_meta_box("layzend_music_information-met
javascript - Firefox 插件 - 在提交之前捕获帖子变量 [no enctype]
我有以下表格: 然后，我想在提交到 firefox addon observer 之前捕获变量值。请注意，表单没有属性:enctype="multipart
javascript - 如何将 enctype 属性添加到 FormData() 对象？
如何向 FormData() 对象添加 enctype 属性？我正在构建一个发送数据和文件的 FormData() 对象。但是，尽管向 xhr 请求添加了 Content-Type header ，
java - enctype multipart/form-data 在多数据类型表单中的使用
我有 html 页面，其中包含 3 个文件输入和 3 个文本输入。如果我在 jsp 页面中使用 enctype = multipart/form-data 我无法获取测试输入表单字段。这些值始终显示为
file - 上传多个文件，enctype =“multipart/form-data”
我想将多个文件上传到 Controller ，但它只上传了一个。我正在使用 multipart 进行文件传输。如何将多个文件获取到 Controller 端。我无法访问字节和文件名。它的抛出错误，
jquery - 将 "enctype"属性设置为 "application/json"
这是我发出 POST 请求的代码: function post(path, params, method) { method = method || "post"; // Set method t
html - 为什么不总是使用 enctype ="multipart/form-data"？
通过更改，我发现 django 管理界面始终使用 enctype="multipart/form-data"。我想采用这种模式，但我不确定我是否看到了这带来的所有后果。为什么不总是使用 encty
jquery - ajax 上的 html 表单 enctype
我有这个提交我的表单数据的 jquery 代码: $(document).ready(function(){ $("#message").hide(); $("#please_wait_box").
html - content-type 和 enctype 有什么区别
用于 HTML 表单。我很困惑，我正在尝试设置 enctype='application/octet-stream' 但服务器收到内容类型 ='application/x-www-form-urlen
html - 为什么不总是使用 enctype ="multipart/form-data"？
在构建 HTML 表单时，为什么我们不总是使用 enctype="multipart/form-data"？最佳答案 multipart/form-data 比 application/x-www-
html - 为什么上传文件时需要form enctype=multipart/form-data？
为什么是将文件上传到网络服务器时需要吗？最佳答案它与浏览器如何打包二进制和表单数据以通过 HTTP 传输有关。默认情况下只发送表单数据，但如果表单需要支持上传文件，则还必须附加二进制数据并将其与表
XSS 过滤器以 enctype ="multipart/form-data"形式
我找到了防止 xss 攻击的下一个代码。但它有一个问题。它适用于具有 enctype="application/x-www-form-urlencoded" 的表单，但不适用于具有 enctype="
angularjs - 使用 ngResource 在 AngularJS 中设置 enctype
我正在使用 Angular 的 $resource 来上传文件。我需要将编码设置为 mulipart/form-data，但无论如何我都找不到在 $resource 中设置 enctype。这可能吗

首页

博学

6Ren·AI

商城

javascript - 向 MongoDB 插入数据并上传图片问题 enctype ="multipart/form-data"