javascript - Spring/Javascript：使用 AJAX 将画布图像作为 MultipartFile 发送

Question

我正在尝试将我的画布图像发送到控制器。我尝试使用ajax，但它似乎不起作用。希望您能够帮助我。这是我的代码。

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/png');
    var blob = dataURItoBlob(dataURL);
    var fd = new FormData(document.forms[0]);
    fd.append("uploadfile", blob, "test");

    $.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");
        }
    });

}

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});
}

这是我的控制器接收提交的图像。

@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();
    }    
}

我尝试手动设置输入文件类型的值，但其他人说这可能会导致安全问题。而且我也无法让它工作。我想做直接图像捕获并将图像保存到服务器。我正在使用弹簧和休眠。希望你能帮助我。谢谢 ！！

标签： javascriptajaxspringcanvasmultipart