图像未插入弹簧靴

Question

我正在使用 spring boot 并且我有简单的表单，其中有上传图像的上传选项。

<form>
    <div class="col-md-6">
        <input type='file' id="imgInp" />
        <img id="blah" src="#" alt="your image" width="200" height="200" />
    </div>
    <button type="submit" id="btn-add" class="btn btn-primary btn-lg">Add Employee
    </button>
</form>

当我上传图像时，它会按以下代码更改为 base 64，并在员工对象中进行操作并通过 AJAX post 方法发送。但我在 spring boot 端遇到错误：

var imgObject;
$(document).ready(function() {

    $("#imgInp").change(function() {
        readURL(this);
    });

    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function(e) {
                $('#blah').attr('src', e.target.result);
                console.log("aaaa");
                imgObject = e.target.result;
                console.log(imgObject);
            }

            reader.readAsDataURL(input.files[0]);
        }
    }


    $('#btn-add').on('click', function() {

        //stop submit the form, we will post it manually.
        event.preventDefault();
        console.log("hitted");
        fire_ajax_submit();

    });

});

function fire_ajax_submit() {

    var employee = {
        "iNumber": $("#iNumber").val(),
        "fullName": $("#fullName").val(),
        "joinedDate": $("#joinedDate").val(),
        "position": $("#position").val(),
        "reportsTo": $("#reportsTo").val(),
        "cubicleNo": $("#cubicleNo").val(),
        "jobType": $("#jobType").val(),
        "imagObject": imgObject
    };

    console.log(employee);

    $.ajax({
        url: A_PAGE_CONTEXT_PATH + "/insert-emp",
        method: "post",
        contentType: "application/json",
        dataType: "json",
        data: JSON.stringify(employee),
        success: function(response) {
            console.log(response);
            alert("Successfully Saved!");
            window.location.reload(true);
        },
        error: function(response) {
            switch (response.status) {
                case 409:
                    alert("error");
            }
        }
    });

}

console.log(employee)打印为：

图像被转换为base64。 我尝试使用 AJAX 插入图像。所以，我的 Rest Api 是：

@RestController
public class EmployeeController {

    @Autowired
    private EmployeeService empService;

    @PostMapping("/insert-emp")
    @ResponseBody
    public Employee createEmployee(@Valid @RequestBody Employee employee){
      return empService.saveEmployee(employee);
    }
}

我的服务等级是：

@Service
public class EmployeeService {

    @Autowired
    private EmployeeRepository empRepository;

    public Employee saveEmployee(Employee employee){
        if(employee.getId()==0){
            empRepository.save(employee);
        }
        else{
            empRepository.save(employee);
        }
        return  employee;
    }

我的存储库类是：

@Repository
public interface  EmployeeRepository  extends JpaRepository<Employee,Integer> {
}

我的模型 Employee.java 类是：

@Entity
@Table(name = "employee")
public class Employee {

    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Integer id;

    @NotBlank
    private String iNumber;

    @NotBlank
    private String fullName;

//    @NotBlank
    private String joinedDate;

    @NotBlank
    private String position;

    @NotBlank
    private String reportsTo;

    @NotBlank
    private String cubicleNo;

    @NotBlank
    private String jobType;

    private  byte[] imagObject;

    public Employee() {
    }

    //all getters and setters

}

但我得到的错误是：

w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type `byte[]` from String "image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUEBAUEAwUFBAUGBgUGCA4JCAcHCBEMDQoOFBEVFBMRExMWGB8bFhceFxMTGyUcHiAhIyMjFRomKSYiKR8iIyL/2wBDAQYGBggHCBAJCRAiFhMWIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiL/wAARCAOWBmADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8]...[zUOSGGaKKfQfUUMSuR3NY3iCZ7WC3ky+3zQrBHKk8Hv9cUUUhMzv+Es8gLHLbsz/AN4P2/Kom8aQcj7NLke4ooplW0I9T1wvb20sbTQqZPm8vGTwcUtn4niS3WOaOVpAMMRg5P50UUE9BV8YWZyBDcDnH3V/xq3o2qLfmWP94SCWBfHQngUUUDGXGvwWskiSxSEx9SoH+NRr4hgctiKTAODwP8aKKQupONaiyN6Pg9MAf41Qi1mRb2Z3Zmi34CYHAoop20GbdvfLOrFVYY9ay4NUlW5l8470810C46YYj+lFFICWXUylwrHJiOBtxyDWgZRtVucHtRRTa0H0IzdBAcgmoReozHKtxRRSEthxuFwDtODQJAw70UUC6iH5Tx3prnauTk5oooH0IHnwxXHUAimbgeuaKKroJjzJ+74/WmRnI55zRRUCKMF68txIrqu0OVGOvBP+FXBz04ooprYZXEjNcNEcYA9KsoQqYxx0oopg9z//2Q==": Failed to decode VALUE_STRING as base64 (MIME-NO-LINEFEEDS): Illegal character ':' (code 0x3a) in base64 content; nested exception is com.fasterxml.jackson.databind.exc.InvalidFormatException: Cannot deserialize value of type `byte[]` from String "image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUEBAUEAwUFBAUGBgUGCA4JCAcHCBEMDQoOFBEVFBMRExMWGB8bFhceFxMTGyUcHiAhIyMjFRomKSYiKR8iIyL/2wBDAQYGBggHCBAJCRAiFhMWIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiL/wAARCAOWBmADASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8]...[zUOSGGaKKfQfUUMSuR3NY3iCZ7WC3ky+3zQrBHKk8Hv9cUUUhMzv+Es8gLHLbsz/AN4P2/Kom8aQcj7NLke4ooplW0I9T1wvb20sbTQqZPm8vGTwcUtn4niS3WOaOVpAMMRg5P50UUE9BV8YWZyBDcDnH3V/xq3o2qLfmWP94SCWBfHQngUUUDGXGvwWskiSxSEx9SoH+NRr4hgctiKTAODwP8aKKQupONaiyN6Pg9MAf41Qi1mRb2Z3Zmi34CYHAoop20GbdvfLOrFVYY9ay4NUlW5l8470810C46YYj+lFFICWXUylwrHJiOBtxyDWgZRtVucHtRRTa0H0IzdBAcgmoReozHKtxRRSEthxuFwDtODQJAw70UUC6iH5Tx3prnauTk5oooH0IHnwxXHUAimbgeuaKKroJjzJ+74/WmRnI55zRRUCKMF68txIrqu0OVGOvBP+FXBz04ooprYZXEjNcNEcYA9KsoQqYxx0oopg9z//2Q==": Failed to decode VALUE_STRING as base64 (MIME-NO-LINEFEEDS): Illegal character ':' (code 0x3a) in base64 content
 at [Source: (PushbackInputStream); line: 1, column: 143] (through reference chain: com.ashwin.vemployee.model.Employee["imagObject"])]

我该如何处理这个错误？

Answer 1

这不是标准方法。 但是试试吧。

@Entity @Table(name = "employee") 
public class Employee { 
@Id 
@GeneratedValue(strategy = GenerationType.IDENTITY)
 private Integer id;
 // Remaining fields 
@Transient
private String imageDecode;
}

从 UI 将您的解码数据发送到此瞬态变量。

成功序列化后，将该字符串转换为字节数组[]。

byte[] byte = imageDecode.getBytes();

希望这会奏效。

Answer 2

堆栈跟踪显示了确切的问题。 是的，您不能将字符串反序列化为字节数组。 要使您的 JSON 反序列化工作，您需要创建自定义反序列化器。

参考： https ://www.baeldung.com/jackson-deserialization