保存图像库 64 AngularJS Spring-Batch

Posted 2023-03-22

【中文标题】保存图像库 64 AngularJS Spring-Batch

【英文标题】：Save Image base 64 AngularJS Spring-Batch

【发布时间】：2021-12-21 03:31:12

【问题描述】：

我需要允许用户从他的电脑中选择一张图片，然后这张图片应该保存在数据库中的 blob 列中。 我有选择图像的代码：

<input type="file" id="fileSelector1" class="form-control" name="schemeupload" accept="image/jpeg" file-model="vm.schemeApply.documents[0]"/>

然后我必须将图像转换为base64以发送到后面（java），然后在后面将base64字符串插入de blob列？还是我必须以其他方式做？我是第一次保存图片。

我知道这样保存图像效率不高，但我必须这样做。

编辑： 我现在用这个：

<input type="file" id="fileSelector1" class="form-control" name="schemeupload" ng-model="img_icon" file-model as-file accept="image/jpeg" ng-change="onFileSelected(this)" /> 

但我不知道如何获取 img 以获取 base64 字符串

【参考方案1】：

这是一个纯 javascript 解决方案，没有 angularjs-file-model 演示如何将所选文件转换为 BASE64。您可以以此为起点：

function onFileSelected(input) 
    const reader = new FileReader();
    
    reader.addEventListener('load', event => 
        const dataURL = event.target.result;
        
        // Cut away "data:image/png;base64,"
        const base64 = dataURL.substring(dataURL.lastIndexOf(',') + 1);
        console.log(base64);
    );

    reader.addEventListener('error', () => 
        // Error handling code
    )
    
    reader.readAsDataURL(input.files[0]);

<input type="file" id="fileSelector1" class="form-control" name="schemeupload" accept="image/jpeg" onchange="onFileSelected(this)">

angularjs-file-model 应在将file-model 与as-file 一起使用时将文件对象投影到您的模型中。您也许可以在此处使用它而不是 input.files[0]。

【讨论】：

我收到此错误：majusebetter:(index):1 Uncaught ReferenceError: onFileSelected is not defined at htmlInputElement.onchange ((index):1)

是的，这是一个纯 JavaScript 解决方案。对于 AngularJS，你需要使用一些指令。当您使用 angularjs-file-model 时，您的 HTML 必须如下所示：<input type="file" ng-model="files" file-model as-file ng-change="onFileSelected()">。只需从onFileSelected() 中删除input 参数并在函数中使用模型的files 属性而不是input.files。

谢谢，这是我第一次这样做，所以有一些新的东西......要去尝试

太好了，现在正在工作，当我选择图像时它进入方法，对于输入参数我应该使用哪个变量？我的 ng-model 有这样的路径：C\fakepath\name.jpeg，如果我在 html 中作为参数：onFileSelected(this) 没有目标属性，知道吗？

您是否还在标记中使用了as-file？根据文档，它应该将 File 对象绑定到您的模型。 npmjs.com/package/angularjs-file-model