ajax - 如何在node js中上传文件到api服务器?

标签 ajax node.js html mongodb express

我正在构建一个网络应用程序,需要上传测试报告。我正在前端工作,其他人正在后端工作(使用nodejs和mongodb)。他的 api 服务器单独运行,我的 webapp 单独运行。现在我需要将上传的文件按原样发送到他的API。我在做这件事时遇到了问题。我通过ajax发送数据。这是我的ajax代码

var $form = $(e.target);
var formData = new FormData();
formData.append('productsfile', $('#prdcttestfile')[0].files[0]);
formData.append('productid', $('#prdctid').val());
formData.append('warantydays', $('#prdctwarranty').val());
formData.append('baseprice', $('#prdctbaseprice').val());
formData.append('discountedpercent', $('#prdctdiscountedprice').val());
formData.append('taxpercent', $('#prdcttax').val());
formData.append('language', $('#prdctlanguage').val());
formData.append('inventoryid', $('#village').val());
$.ajax({
    url: '/product/movetoinventory',
    type: 'POST',
    data: formData,
    contentType: false,
    processData: false,
    success: function (response) {
        if (response.success) {
            new PNotify({
                title: "Enquiry Updted",
                type: "info",
                text: "Your enquiry has been updated",
                nonblock: {
                    nonblock: true
                },
                addclass: 'dark',
                styling: 'bootstrap3',
                hide: true,
                before_close: function (PNotify) {
                    PNotify.update({
                        title: PNotify.options.title + " - Enjoy your Stay",
                        before_close: null
                    });

                    PNotify.queueRemove();


                    return false;
                }
            });
            $('.modal.in').modal('hide');
            $("#inventory_product")[0].reset();
        }
    }
});

当我在 route 使用 console.log(req.body) 时,我将获取数据以及文件路径(不是文件)。如果我使用 console.log(req.files) 我会得到空的 {}。

最佳答案

您可以使用两种方法上传文件。

  1. 将文件的Base64发送到后端。后端开发人员将此文件存储在服务器中,存储位置的URL将存储在数据库中。

  2. 对于 Node 有 multer 和 connect-multiparty npm。您可以选择其中之一。

    后端代码是

    var express = require('express'),
    bodyParser = require('body-parser'),
    host = '127.0.0.1',
    port = '3002',
    multer = require('multer'),
    app = express();
    var upload = multer()
    app.use(bodyParser.urlencoded({
       extended: false
    
    }))
    
    
    app.post('/file-upload', upload, function(req, res) {
       console.log('file upload');
    })
    app.listen(port, function() {
       console.log('hi server run' + " " + port);
    })
    

前端代码为

<body>
<form method="post" enctype="multipart/form-data" action="http://localhost:3002/file-upload">
    <input type="file" name="thumbnail">
    <input type="submit">
</form>

我认为第二个选项是文件上传的不错选择。您可以查看 multer

用于多个文件上传

关于ajax - 如何在node js中上传文件到api服务器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43040445/

相关文章:

php - FireFox 和 IE Jquery 不工作

javascript - Rails 中的远程模态形式,不触发 AJAX 事件

javascript - 尝试在 Jasmine 规范文件中导入类时获取 "SyntaxError: Cannot use import statement outside a module"

javascript - AJAX getElementsByClassName 获取元素

javascript - Jasmine-node 未显示测试结果

javascript - Node JS 发布 | PUT 正文验证

html - 使用 Bootstrap 在悬停时展开 div

html <option> 背景色线性渐变

javascript - ngHide 指令仅在页面刷新后适用于 ngRoute 模块

c# - 如何使用 Ajax 从部分 View 更新父表