使用AJAX將圖像上傳到數據庫不會作為blob上傳

Question

我有一個網頁，應該將圖像上傳到數據庫，並帶有描述圖像的名稱。 考慮上傳徽標和公司徽標的名稱。

當我選擇圖像文件並將其上傳到數據庫時，我可以將該信息返回到列表中的網頁。 但是，它沒有以我期望的方式編碼。 我希望將圖像文件作為blob上傳，以便我可以將blob轉換為Base64並將其傳遞給我的Web應用程序。

如果我使用MySQLs手動上傳圖像，這就是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>

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代碼看起來它不能處理文件上傳，因此這個答案僅適用於客戶端代碼。

1. 這不是嚴格意義上的，但您不希望以任何其他方式執行此操作。

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