Отправьте изображение холста на контроллер в виде multiitpart / form-data через AJAX - PullRequest
Новая
       22

Отправьте изображение холста на контроллер в виде multiitpart / form-data через AJAX

0 голосов
/ 12 октября 2018

Я пытаюсь отправить изображение холста, используя ajax с multipart / form-data, но это не работает.Я попытался добавить его для формирования данных, но он не возвращает даже сообщение об ошибке.

Это мой код: 

    var video = document.querySelector('video')
      , canvas;

    var img = document.querySelector('img') || document.createElement('img');
    var context;
    var width = video.offsetWidth
        , height = video.offsetHeight;

    canvas = canvas || document.createElement('canvas');
    canvas.width = width;
    canvas.height = height;

    context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, width, height);

    img.src = canvas.toDataURL('image/png');
    document.body.appendChild(img);

    var dataURL = canvas.toDataURL('image/png');
    var blob = dataURItoBlob(dataURL);
    var fd = new FormData(document.forms[0]);
    fd.append("canvasImage", blob);

    $.ajax({
        type: "POST",
        enctype: 'multipart/form-data',
        url: "/api/file/upload",
        data: fd,
        processData: false, //prevent jQuery from automatically transforming the data into a query string
        contentType: false,
        cache: false,
        success: (data) => {
            alert("shit");
        },
        error: (e) => {
            alert("error");
        }
    });

Контроллер: 

@PostMapping("/api/file/upload")
public String uploadMultipartFile(MultipartFile file) {
        return "Content Type RC: " + file.getContentType() + " Name RC: " + file.getName() + "to String: " + file.toString();
}
...