将Base64 / Blob从客户端上传到Postgresql Node.js

问题描述

我有一个Web应用程序，用户可以在其中上传多个图像。在前端，我正在使用crappie库为用户提供裁剪图像的可访问性。由于裁剪，该库返回base64或blob。我将图像保存在Array中，并将images数组与表单数据一起发送到Node.js。 Nodejs使用主体解析器接收数据，并将数据插入Postgres。

有三件事。

1. 这是在Postgresql中保存base64的正确方法，并且在缩放时会导致性能问题吗？

2. 在检索图像时，我必须加入两个表，这会导致多个表A行，并且我必须使用多余的for循环来过滤它们。如何获取第二个表作为数组。

    Select *,images.image as images from A JOIN images on A.id = images.a_id; 
    // Output
    name,images 
    1,BASE64 DATA 
    1,BASE64 DATA
    2,BASE64 DATA
    3,BASE64 DATA
   
    // expecting 
    name,images
    1,[BASE64,BASE64]
   
   // Postgresql table
   
    table A (
       id BIGSERIAL NOT NULL PRIMARY KEY,name VARCHAR NOT NULL,} 
   
    table B )
       id BIGSERIAL NOT NULL PRIMARY KEY,image BYTEA NOT NULL,a_id BIGSERIAL REFERENCES A (id)
    )
   

3. 如果表B中有1000行，则这些base64数据的范围可能从3MB到10MB。这将对服务器造成沉重的负担。我可以为此使用什么其他逻辑。

//客户端

var images = [];
var image_error = $(".error")

$('#submit_form').on('click',function () {
    if (!images.length) {
        $('html,body').animate({
            scrollTop: image_error.offset().top
        },500);
        image_error.show('slow')
    }else{
        $('form').submit();
    }
})

$('form').submit(function (e) {
    e.preventDefault();
    console.log("Submitting form")

    showProgress("Please Wait...")

    var data = {};
    var formArray = $(this).serializeArray()
    for (var i = 0; i < formArray.length; i++) {
        data[formArray[i]['name']] = formArray[i]['value'];
    }

    data['images'] = images

    $.ajax({
        type: "post",url: "/lost_person_form",data: data,success: function (id) {
            window.location = "/lost_person?id=" + id
            hideProgress()
        },error: function (error) {
            error.html(error.responseText)
            error.show('slow')
            hideProgress()
        }
    })
})



var image;

$("#file").on('change',function (event) {
    var src = URL.createObjectURL(event.target.files[0]);
    var el = document.getElementById('image');
    var image_upload = $('.image_upload')



    var vanilla = new Croppie(el,{
        url: src,viewport: { width: 250,height: 250 },boundary: { width: 300,height: 300 },enableOrientation: true
    });



    $("#save").on('click',function () {
        vanilla.result('base64').then(function(blob) {
            images.push(blob)
           $("#save").off()
        });
    })


})

//服务器端

app.post("/lost_person_form",client.access_denied_redirect_login,function (req,res) {
    const {name,images} = req.body;
    var query = "INSERT INTO A (name) values ($1) RETURNING id";
    var data = [name];
    var image_query = "insert into B (image,a_id) values ($1,$2);";

    client.query(query,data,res,function (data) {
        var id = data.rows[0].id;
        var images_promise = [];
        console.log("Length ",images.length);
        images.forEach(function (image) {
            images_promise.push(client.query(image_query,[image,id]));
        });
        Promise.all(images_promise).then(function () {
           res.send(id)
        })
    });
});

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）