Question

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

有三件事。

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

在检索图像时，我必须加入两个表，这会导致多个表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)
 )

如果表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)
        })
    });
});

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

0 个答案: