我正在构建一个需要上传测试报告的Web应用程序。 我在前端工作,其他人正在后端工作(使用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(); } } });当我在我的路线中使用console.log(req.body)时,我将获取数据以及文件路径(不是文件)。 如果我使用console.log(req.files)我会变空{}。
I am building a web app which need to upload a test report. i am working on front end and other guy is working on backend(with nodejs and mongodb). His api server is running separately and my webapp is running separately. now i need to send the uploaded file to his api as it is. i am having a problem in doing it. I am sending data through ajax. this is my ajax code
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(); } } });when i use console.log(req.body) in my routes i am getting the data along with the FILE PATH(not file). if i use console.log(req.files) i am getting empty {}.
最满意答案
您可以使用两种方法进行文件上传。
将文件的Base64发送到后端。后端开发人员将此文件存储在服务器中,商店位置的URL将存储在数据库中。
对于节点有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
用于多个文件上传
You can use two methods for file uploading.
Send Base64 of the file to the backend.The Backend developer store this file in server and URL of the store location will store in the database.
For node have multer and connect-multiparty npm.You can choose one of them.
For backend code is
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); })and the froent-end code is
<body> <form method="post" enctype="multipart/form-data" action="http://localhost:3002/file-upload"> <input type="file" name="thumbnail"> <input type="submit"> </form>I think that the a second option is a good option for file upload.You can check multer
for multiple file upload at a
更多推荐
发布评论