javascript - Node.js 存储图像。在前端获取这些图像

Question

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

管理端:

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

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

服务器端:

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

类似的东西:

 // 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
});

希望这对您有所帮助。