JS切换什么形式返回b64字符串答案

【问题标题】：JS switch what form returns to a b64 stringJS切换什么形式返回b64字符串
【发布时间】：2022-01-25 22:10:59
【问题描述】：

我想在我的数据库中保存一张 b64 格式的图像。出于某些原因，我想处理事物前端的逻辑。我的后端发送了一个表单，并且已经使用 onChange 函数封装了文件字段输入，该函数可以转换 img -> b64：

<form>
    <input id="file-select" name="pic" class="form-control" type="file" onchange="getImage()">
    <button>submit</button>
</form>

getImage() 看起来像这样：

function getImage() {
    var reader = new FileReader();
    var f = document.getElementById("file-select").files;
    reader.onloadend = function () {
        console.log(reader.result);
    }
    reader.readAsDataURL(f[0]);
}

如何将按下按钮时输入字段提交的内容替换为 reader.readAsDataURL(f[0]) 的值？

【问题讨论】：

base64 图像比原始图像大 1/4。将图像存储为 base64 字符串是不明智的。特地不进数据库表。将其保存为二进制文件，以IMAGEHASH.EXT 的形式保存到服务器文件夹中。在数据库中存储图像名称、扩展名、哈希和用户 ID。
我知道这一点，但我用它来存储图标（文件大小
我不确定是否理解您的问题：“如何将输入字段在按下按钮时提交的内容替换为”的值
我希望将 b64 字符串发送到后端，而不是 img 字段。 onchange 函数创建了这个 DataURL 对象，我怎样才能将它发送到我的后端？

标签： javascript forms html-input

【解决方案1】：

使用输入value属性
不要使用内联on* JS 处理程序（希望你不要使用内联style 属性）。请改用addEventListener()
为您要提交的 URL 添加缺少的表单 action 属性
将required 属性添加到您的输入元素

const EL = (sel, el) => (el || document).querySelector(sel);

const EL_file = EL("#file-select");

const readFile = () => {
  if (!EL_file.files) return;
  const FR = new FileReader();
  FR.addEventListener("load", (evt) => EL_file.value = evt.target.result);
  FR.readAsDataURL(this.files[0]);
};

EL_file.addEventListener("change", readFile);

<form id="file-form" action="save_base64.php">
  <input id="file-select" name="pic" class="form-control" type="file" required>
  <button>Submit</button>
</form>

【讨论】：