Загрузка изображения в базу данных с использованием AJAX не загружается как блоб - PullRequest
Новая
       18

Загрузка изображения в базу данных с использованием AJAX не загружается как блоб

0 голосов
/ 24 апреля 2019

У меня есть веб-страница, на которой предполагается загрузить изображение в базу данных с именем, описывающим изображение. Подумайте о загрузке логотипа и названия логотипа компании.

Когда я выбираю файл изображения и отправляю его в базу данных, я могу вернуть эту информацию на веб-странице в виде списка. Тем не менее, он не закодирован так, как я ожидал. Я хотел бы, чтобы файл изображения загружался в виде большого двоичного объекта, чтобы я мог преобразовать большой двоичный объект в Base64 и передать его своему веб-приложению.

Вот так выглядит код BLOB-объекта, если я вручную загружаю изображения с помощью графического интерфейса MySQL. «iVBORw0KGgoAAAANSUhEUgAACWAAAAnHCAYAAAAIV ...», который я могу преобразовать в Base64 позже.

Когда я использую свою веб-страницу ajax для загрузки изображения, я получаю "QzpcZmFrZXBhdGhcU3ByaW5nLnBuZw ==".

У меня вопрос: как я могу вместо этого загрузить ajax в виде большого двоичного объекта, чтобы мое Java-приложение могло правильно вызывать большой двоичный объект и преобразовывать его в 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";
    }
}

Ответы [ 2 ]

0 голосов
/ 25 апреля 2019

Проблема заключалась в том, что я не обрабатывал файл так, чтобы программа могла прочитать содержимое файла.Вместо этого он просто получал поддельный путь к файлу с именем файла.

Исправлено с помощью @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";
    }
}
0 голосов
/ 25 апреля 2019

Вы должны использовать объект FormData для загрузки multipart / form-data 1 через ajax. 

$('#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. Это не совсем верно, но вы не захотите делать этолюбым другим способом.
...