Question

我正在制作一个允许用户上传和搜索食谱的网络应用。用户可以通过填写表单来上传配方，然后按下按钮以执行POST请求。我设法保存配方对象，但我无法为其分配图像。我试图使用Multer，但是当"underfined"时我得到log(req.file)。我关注了只有app.js和index.ejs的YouTube教程，并且它有效，所以我不知道它是否是我的Ajax代码导致问题?? !!

我有main.handlebars和main.css，我有一个名为uploads的文件夹，但仍然总是在终端中未定义，下面是我的代码的一部分：谢谢！

upload.handlebars：

      <label for="Userphrase">Recipe Name:</label>
  <input type = "text" name = "recipeName" id = "recipeName"><br>

  <label>Upload an image:</label>

  <div class="container">
  <input name="myImage" type="file"<br>
</div>
.
.
.
<script type = "text/javascript" src = "/public/palindrome.js"></script>

Ajax，只有请求在这里，因为我在此之前进行了错误检查：

      $("form").submit(function(e){
      $.ajax({
    type: "POST",
    url: "/upload",
    data: obj,
    success: function(data){
      alert("recipe added successfully!");
    },
    dataType: "json"
  });
   }

index.js：在顶部我有：

const storage = multer.diskStorage({
destination: './public/uploads/',
filename: function(req, file, cb){
    cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});

const upload = multer ({
storage: storage
}).single('myImage');

然后在POST路线中我有：

router.post('/upload',(req,res)=>{
 upload(req, res, (err) => {
if(err){
    res.render('index',{
        msg: err
    });
}else{
    console.log(req.file);
    res.send('test');
}
});

Answer 1

您必须以表格数据发送图片，例如

import dynamicLocalization from '@/components/mixins/dynamic-localization'

export default {
   ...
   mixins:[dynamicLocalization]
   ...
}

在节点端用户同名（'imageName'），对于multer，它将从中获取图像更多的是检查 https://www.npmjs.com/package/multer

Answer 2

为简单起见，只需在客户端使用enctype设置为multipart/form-data的HTML表单。在服务器端，假设您正在使用Node.js，只要您使用request中间件来解析表单数据，就可以在multer中找到上传的文件。就是这样。

Answer 3

您需要将该文件附加到formData，然后将其发送到服务器

<强>使用Javascript：

var formData = new FormData();
        jQuery.each(jQuery('#fileUpload')[0].files, function (i, file) {
            formData.append('file', file);
        });

$.ajax({
            type: 'POST',
            url: //To your route eg: /saveImage,
            data: formData,
            contentType: false,
            processData: false,
            success: function (result) {
                if (result.status != 0) {
                    console.log(result.message)
                    return;
                }
                console.log(result.message)
            }
        });

现在在你的路线上使用multer

节点

var multer = require('multer')
var path = require("path");

// Check for extension of image
const getExtension = file =>{
    if (file.mimetype == "image/jpeg")
        ext =  ".jpeg"
    else
        ext =".png"
    return ext;
}

//initialize multer
var storage = multer.diskStorage({ 
    destination: function (req, file, cb) {
        cb(null, path.join(__dirname, '../public/images'))
    },
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() + getExtension(file))
    }
 })
 var upload = multer({storage:storage})

router.post('/saveImage', upload.single('file'), (req, res, next)=>{
    if (req.file && req.file.mimetype != 'image/jpeg' && req.file.mimetype != 'image/png') 
        return res.json({
            status:1,
            message:"Please Choose JPG or PNG images"
        })
if(req.file){
            let iamge = "/images/" + req.file.filename
res.json({
            status:0,
            message:"Successfully saved",
            path : image
        })
        }
})

如何使用节点js和express将图像上传到mongodb

3 个答案: