Загрузить изображение с измененной формой на сервер

Question

Я хочу загрузить измененное изображение на сервер, но при попытке загрузить измененное изображение я получаю сообщение об ошибке «Обязательный параметр параметра MultipartFile» файла «нет». Когда я загружаю исходный файл, нет проблем.

Сценарий:

function resizeAndUpload(file) { 
    var reader = new FileReader(); 
    reader.onloadend = function() { 

     var tempImg = new Image(); 
     tempImg.src = reader.result; 
     tempImg.onload = function() { 

      var MAX_WIDTH = 200; 
      var MAX_HEIGHT = 200; 
      var tempW = tempImg.width; 
      var tempH = tempImg.height; 
      if (tempW > tempH) { 
       if (tempW > MAX_WIDTH) { 
        tempH *= MAX_WIDTH/tempW; 
        tempW = MAX_WIDTH; 
       } 
      } else { 
       if (tempH > MAX_HEIGHT) { 
        tempW *= MAX_HEIGHT/tempH; 
        tempH = MAX_HEIGHT; 
       } 
      } 

      var canvas = document.createElement('canvas'); 
      canvas.width = tempW; 
      canvas.height = tempH; 
      var ctx = canvas.getContext("2d"); 
      ctx.drawImage(this, 0, 0, tempW, tempH); 
      var dataURL = canvas.toDataURL("image/jpeg"); 

      var data = new FormData(); 
      data.append('file', dataURL); 

      $.ajax({ 
       url: '/changeimage', 
       type: 'POST', 
       data: data, 
       cache: false, 
       contentType: false, 
       processData: false, 
       success: function() { 
        window.alert("uploaded") 
       } 
      }); 
     } 
    } 
    reader.readAsDataURL(file); 
} 

Сервер:

@RequestMapping(value = "/changeimage", method = RequestMethod.POST) 
@ResponseBody 
public String changeProfileImage(@Context HttpServletRequest request, @RequestParam("file") MultipartFile file) { 
    return "ok"; 
} 

Answer 1

URL-адрес данных является строкой и не будет загружать в виде файла.
Однако вы можете использовать blob вместо

... 
    ctx.drawImage(this, 0, 0, tempW, tempH); 
    canvas.toBlob(function(blob){ 

     var data = new FormData(); 
     data.append('file', blob); 

     $.ajax({ 
      url: '/changeimage', 
      type: 'POST', 
      data: data, 
      cache: false, 
      contentType: false, 
      processData: false, 
      success: function() { 
       window.alert("uploaded") 
      } 
     }); 
    }); 
    ...