Question

我有一个网页，该网页应该将图像上载到描述该图像的名称。考虑上传徽标和公司徽标的名称。

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

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

但是，当我使用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>

HomeController

@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";
    }
}

Answer 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代码时，它看起来无法处理文件上传，因此此答案仅适用于客户端代码。

严格来说，这不是真的，但您不想以任何其他方式来做。

Answer 2

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

通过使用@RequestParam和MultipartFile进行修复，然后在传递给DAO之前分配给对象。

RESTController.java

<div class="h-100 d-flex flex-column">    
    <div class="d-flex align-items-center justify-content-center bg-red" style="height: 7%">
    </div>
    <div class="d-flex align-items-center justify-content-center bg-red" style="height: 3%">
    </div>
    <div class="bg-green" style="max-height: 75%; height: 75%; overflow-y: auto;">
        <div class="bg-gray m-4" style="height: 2000px;">
                    The height of this content causes BOTH scroll bars to appear. I only want a bar on the 
                    'green section'
        </div>
    </div>
    <div class="bg-red flex-grow-1">
    </div>            
</div>

使用AJAX将图像上传到数据库不是以blob形式上传

2 个答案: