我想将几张图片上传到我的 nodejs 服务器,其中包含标题和类别等附加信息,我尝试在DataUrl中发送图片,但由于 POST 限制,它不允许我一次上传超过 2 张图片。
为了上传图片,我使用了这个 reactjs组件 Image Upload Component,它有handleSubmitImages方法通过 ajax 将组件状态发送到服务器。
处理提交图像()
handleSubmitImages(){
let xhr = new XMLHttpRequest()
let json = JSON.stringify({images: this.state.images})
xhr.open("POST",'new',true)
xhr.setRequestHeader("Content-Type","application/json")
xhr.send(json)
}
组件状态
组件的状态由包含图像信息的 json 对象数组组成,如下所示:
[
{ title: 'Imagen 264',
file: [Blob], // Este es el blob del archivo
data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA', //Imagen en base64
category: 1 }
]
在服务器上,我有使用POST方法上传图像的壁纸/新路由。
路线壁纸/新
router.route("/new")
.get(function(req,res){
res.render('wallpaper/new',{
user: req.user
})
})
.post(function(req, res) {
let images = req.body.images
images.map(image => {
// Aquí debería poder guardar la imagen en mi servidor
})
});
注意:我已经阅读了使用formidable和FormData()来同时上传多张图片的教程,但是它们都没有发送额外的信息,例如图片标题或类似的东西。我希望你能帮助我。
不需要发送2次图片,我建议你只发送
data url
而忘记发送Blob,你不能在json中序列化它,如果你选择这种方式,(据我所知)你只能使用FromData
这是一种替代方法。要发送多个图像,您可以通过将循环移动到客户端来非常轻松地解决它。因此,服务器的传输限制将应用于每个图像(减去 ~1/3 开销),而不是应用于整个图像集合。您还可以通过同时发送多个图像来更好地利用带宽。
然后在服务器端,您只能一一收到文件: