将文件的base64值发送到api

Question

我正在努力上传我想通过 PUT 请求保存的文件。 我用解决方案更新了问题。

我有一个表单，允许在不同的字段中上传多个图像，但也可以在其他字段中上传字符串：

我遍历所有字段以收集 JSON 中的信息，然后将它们推送到我的 API：

keys 是一个带有 JSON 键名的字典（API 检查这些键），例如：name|STR、price|FLOAT、ppic|IMG。

$('#checkButton').on('click', function( event ) {
    let form = document.querySelector('#productForm');
    let nbr = document.querySelector('#productdata').getAttribute("pid")
    let return_dict = {"number": nbr};

    const pendings = ["name", "pic"].map(async function ( key ) {
        return_dict["name"] = form.elements[0].value;
        return_dict["pic"] = await img_2_b64(form.elements[1]);
    });
    Promise.all(pendings).then((values) => {
        write_2_DB_with_ajax_call ( return_dict )
    });
});

如果密钥将字段标识为 IMG，我想将其转换为 base64 并保存 - 这是我的解决方案：

function img_2_b64( element ) {
    return new Promise((resolve, reject) => {
        let file = element.files[0];
        let reader = new FileReader();
        reader.onloadend = function(e) {
            resolve(e.target.result);
        };
        reader.onerror = function() {
            reject();
        };
    reader.readAsDataURL(file);
    });

Answer 1

也许你可以使用 Promise 来更好地控制信息流：

$('#checkButton').on('click', function( event ) {
    let form = document.querySelector('#productForm');

    let return_dict = {"number": 0, "data": d};
    const pendings = keys.map(async function ( key ) {
        for ( let fe = 0; fe < form.elements.length; fe++ ) {
            if ( form.elements[fe].getAttribute("data-key") === key ) {
                if ( key.split("|")[1] === "IMG" ) {
                    d[key] = await img_2_b64(form.elements[fe]);
                } else {
                    d[key] = form.elements[fe].value;
                }
            };
        };
    });
   Promise.all(pendings)
    .then((values) => {
      write_2_DB_with_ajax_call ( values )
    });
  });

和

function img_2_b64( element ) {
  return new Promise((resolve, reject) => {
    let fileprops = "";
    let file = element.files[0];
    let reader = new FileReader();
    reader.onloadend = function() {
        resolve(reader.readAsDataURL(file));
    };
    reader.onerror = function() {
      reject();
    };
  })
}