Question

我从来没有做过类似的事情，经过调查一段时间后我找不到我想要的东西。如果存在，我可能太愚蠢而无法注意/理解它。

管理员：

在我正在开发的网站中（在管理页面中）我有一个表单，它只是一个简单的基于文本的表单。我可以通过ajax将表单信息发送到服务器。我现在需要发送由我上传的图像文件。我想知道我是否可以同时调用文本信息和图像（仅限一种形式）？如果有，怎么样？（下面是我的ajax配置的一部分）。我还通过其ID获取表单信息。

$.ajax({
    url: 'http://localhost:8080'+url,
    type: type,
    contentType: 'application/json; charset=utf-8',
    data: JSON.stringify(object),
    success: callback     
}

服务器端：

当它只是文本时，我收到了＆＃34; req.body＆＃34;中的信息。我相信我应该收到＆＃34; req.files＆＃34;的文件。为此，我听说过Multer。但是，我不明白，我怎么能在同一个＆＃34; app.post＆＃34;中收到这两个信息。如果可能的话，这就是我想要的。我假装所有这些是将管理页面中的图像存储在非公共服务器文件夹中，然后检索首页中客户端要访问的所有图像。（与此相关：存储在私人文件夹中并从那里检索最佳解决方案并保持路径存储在数据库中？）

类似的东西：

 // receive images and text 
 app.post("/admin_info",function(req,res) {

   var text_info = req.body;
   (...take care of text_info ...)

   var image_file = req.file;
   var images = "/images";
   // then save image_file in images and also save the image path in database to access it later

 });

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

    var images = ["/images/img1.jpg","/images/img2.jpg",...];

    // get actual image files 

    res.send(image_files);

 });

客户端：图像被加载并放置在特定的位置。

Answer 1

是的，你可以这样做。

以下是示例

<form id="test" enctype="multipart/form-data"> <input type="text" name="name" ><br> <input type="file" name="poster" id="poster" multiple><br> <input type="submit" value="POST"> </form>

JS代码

$("#test").on('submit', function(e){ e.preventDefault(); var form_data = new FormData(this); $.ajax({ type: 'post', url: '/test/all', data: form_data, cache: false, contentType: false, processData: false, success: function(answ){ console.log("Done"); } }) });

在服务器端，您需要使用具有以下配置的multer（不要忘记正文解析器）。这一切都在路线之前。

const multer = require('multer');

app.use(multer({ dest: './temp/'}).any());

而不是在路上你只是这样做

app.post("/test/all", function(req,res){
    console.log(req.body); //has name property
    console.log(req.files); //has all files that you upload
    //now just read files array and save files where you want
});

希望这有帮助。

Node.js存储图像。将这些图片放在前端

1 个答案: