yükle sunucusuna

Question

Ben sunucuya yeniden boyutlandırılmış bir resim yüklemek istediğiniz

form resim resized, ama ben yeniden boyutlandırılmış bir resim yüklemeye çalışırken hata "Gerekli MultipartFile parametresi 'dosyası' mevcut değil" olsun. Orijinal dosyayı oradan yüklediğimde sorun yok.

Senaryo:

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

Sunucu:

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

Answer 1

bir veri URL'si bir dizedir ve bir dosya olarak yüklenmeyecektir.
Bir blob yerine

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

kullanabilirsiniz Ancak