Конвертировать base64 в Multipart / Form-data - PullRequest
Новая
       38

Конвертировать base64 в Multipart / Form-data

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

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

function takeSnapshot() {
    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/jpeg', 0.5);
    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("yes");
        },
        error: (e) => {
            alert("no");
        }
    });
}

function dataURItoBlob(dataURI) {
    // convert base64/URLEncoded data component to raw binary data held in a string
    var byteString;
    if (dataURI.split(',')[0].indexOf('base64') >= 0)
        byteString = atob(dataURI.split(',')[1]);
    else
        byteString = unescape(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to a typed array
    var ia = new Uint8Array(byteString.length);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    return new Blob([ia], {type:mimeString});
}

Я пытаюсь преобразовать base 64 в multipart / form-data для отправки изображения.Это работает, когда я использую форму для загрузки.Но я хочу знать, как я могу использовать его здесь.

Это мой контроллер, который получает переданный файл. 

@PostMapping("/api/file/upload")
    public String uploadMultipartFile(@RequestParam("uploadfile") MultipartFile file) {
        try {
            fileStorage.store(file);
            return "File uploaded successfully! -> filename = " + file.getOriginalFilename();
        } catch (Exception e) {
            return "Error -> message = " + e.getMessage();
        }    
    }

Есть ли что-нибудь, что я могу сделать.Он даже не показывает сообщение об ошибке при запуске AJAX.Пожалуйста помоги.Большое вам спасибо

...