使用 AJAX 将图像上传到数据库不是作为 blob 上传答案

【问题标题】：Uploading image to database using AJAX is not uploading as blob使用 AJAX 将图像上传到数据库不是作为 blob 上传
【发布时间】：2019-09-14 01:50:20
【问题描述】：

我有一个网页应该将图像上传到数据库，并使用名称来描述图像。考虑上传徽标和公司徽标的名称。

当我选择图像文件并将其提交到数据库时，我可以将该信息以列表的形式返回到网页。但是，它没有以我期望的方式编码。我希望将图像文件作为 blob 上传，以便我可以将 blob 转换为 Base64 并将其传递给我的 Web 应用程序。

如果我使用 MySQLs gui 手动上传图像，这就是 blob 代码的样子。 “iVBORw0KGgoAAAANSUhEUgAACWAAAAnHCAYAAAAIV...”我可以稍后转换为 Base64。

但是，当我使用我的 ajax 网页上传图片时，我收到 “QzpcZmFrZXBhdGhcU3ByaW5nLnBuZw==”。

我的问题是，如何让 ajax 将其作为 blob 上传，以便我的 Java 应用程序可以正确调用 blob 并将其转换为 Base64？

ajax.js

$(function (){

var $skills = $('#skills');
var $logo = $('#logo');
var $techName = $('#techName');

$.ajax({
    type: 'GET',
    url: '/api/technologyList',
    success: function(skills) {
        $.each(skills, function(i, skill) {
            $('#skills-list').append('<tr><td> ' + skill.logo + '</td>' + '<td>' + skill.techName + '</td></tr>')
        })

    }
})

$('#addSkill').on('click', function () {
    var skill = {
        techName: $techName.val(),
        logo: $logo.val()
    }
    $.ajax({
        type: 'POST',
        url:'/api/technologyList',
        data: skill,
        contentType: "multipart/form-data",
        processData: false,
        success: function (newSkill) {
            $('#skills-list').append('<tr><td> '+ newSkill.logo+ '</td>' +
                '<td> '+ newSkill.techName + '</td></tr>')
            console.log(skill)
        }
    })
})

})

addSkill.html

<table id="skills-list">
  <tr>
    <th>Logo</th>
    <th>Technology</th>
  </tr>
</table>

<form id="skillForm">
    <input type="text" id="techName"/> <br>
    <input type="file" enctype="multipart/form-data" id="logo"/>
    <button id="addSkill">Add!</button>
</form>

家庭控制器

@GetMapping(value = "/technology")
public String technologyList(Model theModel) throws IOException {

    try {
        List<Skills> userSkillsList = skillsService.findSkillList("wmangram");

        List<byte[]> logo = skillsService.findLogos();
        List<String> base64List = new ArrayList<>();

        boolean isBase64 = false;

        for (int i = 0; i < logo.size(); i++) {
            if (Base64.isBase64(logo.get(i))) {
                String base64Encoded = new String((logo.get(i)), "UTF-8");
                base64List.add(base64Encoded);
            }
            else {
                byte[] encodeBase64 = Base64.encodeBase64(logo.get(i));
                String base64Encoded = new String(encodeBase64, "UTF-8");
                base64List.add(base64Encoded);
            }
        }

        theModel.addAttribute("userSkills", userSkillsList);
        theModel.addAttribute("userImages", base64List);

        return "technology";
    }
    catch (NullPointerException nexc) {
        return "nullexception";
    }
}

【问题讨论】：

标签： java ajax rest base64 blob

【解决方案1】：

您必须使用 FormData 对象通过 ajax 上传 multipart/form-data¹。

$('#addSkill').on('click', function () {
    var skill = new FormData();
    skill.append("techName", $techName.val());
    skill.append("logo", $logo.prop("files")[0]);

    $.ajax({
        type: 'POST',
        url:'/api/technologyList',
        data: skill,
        contentType: false, //don't set this, it will be set automatically and properly 
        processData: false,
        success: function (newSkill) {
            $('#skills-list').append('<tr><td> '+ newSkill.logo+ '</td>' +
                '<td> '+ newSkill.techName + '</td></tr>')
            console.log(skill)
        }
    })
})

看java代码好像不能处理文件上传，所以这个答案只针对客户端代码。

这并不完全正确，但您不希望以任何其他方式这样做。

【讨论】：

感谢您与我们联系！我昨天终于弄清楚了，这确实是我没有处理文件的java代码中的一个问题。我正在接收文件但没有读取它的内容然后存储。使用 @RequestParam 和 MultipartFile，我能够读取内容并将字节码值分配给对象。

【解决方案2】：

问题是我没有以让程序读取文件内容的方式处理文件。相反，它只是接收带有文件名的假文件路径。

通过利用 @RequestParam 和 MultipartFile 然后在传递给 DAO 之前分配给对象来修复。

RESTController.java

@PostMapping("/technologyList")
public String uploadMultipartFile(@RequestParam("logo") MultipartFile file, @RequestParam("techName")String techName) {
    User user = userService.findByUsername("wmangram");
    try {
        // save file to MySQL
        Skills newSkill = new Skills(techName, file.getBytes(), user);
        skillsService.createTechnology(newSkill);
        return "File uploaded successfully! -> filename = " + file.getOriginalFilename();
    } catch (Exception e) {
        return "FAIL! Maybe You had uploaded the file before or the file's size > 500KB";
    }
}

【讨论】：