如何从一个表单将多个图像上传到S3并检索两个URL

时间:2019-04-04 05:41:33

标签: jquery html angularjs amazon-s3 multer-s3

因此,我尝试使用一种形式从两个输入框上传两个文件以及其他一些数据,将图像上传到S3存储桶,检索两个图像的URL,并将所有数据一起发送在Mongo数据库中。我无法同时上传图片和检索要存储在变量中的网址。

我已经设置了一个AWS S3存储桶,并使用multer-s3,我可以确认图像可以正确存储在存储桶中,并且post方法将返回带有正确公共URL的JSON。我试图异步上传每个图像并将它们存储在变量中,然后再将整个文档存储在mongoDB中。

JS:

from cryptography.hazmat.backends import default_backend
from cryptography.hazmat.primitives import hashes
from cryptography.hazmat.primitives.kdf.pbkdf2 import PBKDF2HMAC
from cryptography.fernet import Fernet

password_provided = "test123" 
password = password_provided.encode() 
salt = b'test_' 
kdf = PBKDF2HMAC(
    algorithm=hashes.SHA256(),
    length=32,
    salt=salt,
    iterations=100000,
    backend=default_backend()
)
key = base64.urlsafe_b64encode(kdf.derive(password)) 


message = "message from db".encode()

f = Fernet(key)
encrypted = f.encrypt(message)

print(encrypted)

f = Fernet(key)
decrypted = f.decrypt(encrypted)

print(decrypted.decode("utf-8"))

HTML:

Unable to import module 'lambda_function': /opt/cryptography/hazmat/bindings/_constant_time.so: undefined symbol: PyInt_FromLong

multer-s3:

$scope.addListing = function (frontURL, backURL) {
    $scope.newListing.linkToFrontImage = frontURL;
    $scope.newListing.linkToBackImage = backURL;
    Listings.create($scope.newListing).then(function (response) {
      window.location = 'admin.html';
    }, function (error) {
      console.log('Failed to add listing:', error);
    });

 };

$('#cardUpload').submit(function (res) {
    var uploadFrontPhoto = $.post("/api/v1/upload", $("#cardFront"), function(data){
        **Store returned URL in 'frontURL' var**
    });
    var uploadBackPhoto = $.post("/api/v1/upload", $('#cardBack'), function(data){
        **Store returned URL in 'backURL' var**
    });

    uploadFrontPhoto
    .then(uploadBackPhoto)
    .then($scope.addListing(frontURL, backURL), function (error) {
        console.log('Failed to add listing: ', error);
    });
    return true;
});

当前代码未将图像放入S3存储桶中。如果我在HTML表单中放置“ action ='/ api / v1 / upload'”,则两张图片都显示为在存储桶中上传,尽管我不确定如果尝试异步获取该图片是否是最好的方法网址。任何帮助将不胜感激。

0 个答案:

没有答案