上傳HTML5畫布圖像到服務器Angular2/Spring Boot

我試圖上傳HTML5畫布圖像到服務器。不幸的是，當我將畫布轉換爲blob並將其上傳到服務器時，我無法打開圖像。上傳HTML5畫布圖像到服務器Angular2/Spring Boot

我的執行是工作的罰款與以下情況下）：

權在畫布上，並保存通過具有type =「file」輸入形式
選擇畫布圖像文件格式的磁盤單擊以圖像磁盤
發送文件
讀取上傳文件

所需的方案B）：在FORMDATA對象通過AJAX

獲取圖像數據直接從帆布
發送帆布數據
讀取上傳文件

當我打開直接從png文件上傳畫布（場景b）圖像是空白的，但我可以看到它有正確的寬度和高度。當我比較正確的文件在記事本文件中的內容具有相同的乞討/結束，但在中間不同。請求中的唯一區別是內容長度。

技術堆棧：角2.4.6 春季啓動1.5.2

方案一）與文件上傳：

var files = event.srcElement.files; 
let formData = new FormData(); 
formData.append('file', files[0], files[0].name); 
let headers = new Headers(); 
headers.append('Authorization', currentUser.token); 
let options = new RequestOptions({ headers }); 
this.http.post(this.apiUrl, formData, options) 
    .map((response: Response) => { 
     return response; 
    }) 
    .catch(this.handleError);

方案一）要求：

Request URL:http://localhost:8080/public/api/image 
Request Method:POST 
Status Code:200 
Remote Address:[::1]:8080 
Referrer Policy:no-referrer-when-downgrade 
Response Headers 
    view source 
    Access-Control-Allow-Credentials:true 
    Access-Control-Allow-Origin:http://localhost:3000 
    Cache-Control:no-cache, no-store, max-age=0, must-revalidate 
    Content-Length:0 
    Content-Type:application/json;charset=ISO-8859-1 
    Date:Fri, 21 Apr 2017 07:11:09 GMT 
    Expires:0 
    Pragma:no-cache 
    Vary:Origin 
    X-Content-Type-Options:nosniff 
    X-Frame-Options:DENY 
    X-XSS-Protection:1; mode=block 
Request Headers 
    view source 
    Accept:application/json, text/plain, */* 
    Accept-Encoding:gzip, deflate, br 
    Accept-Language:en-US,en;q=0.8,pl;q=0.6 
    Authorization:eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1ZGllbmNlIjoid2ViIiwiY3JlYXRlZCI6MTQ5MjU0Nzc5OTYxMiwiZXhwIjoxNDkzMTUyNTk5fQ.YKhBf1bOS-egqLahtIFWI5t2vrAEbwHss96itIO8HanKU0V38XdOOY-ZJV41wE5oSqmOoGVUYXJMoxXYrLOzXw 
    Connection:keep-alive 
    Content-Length:25242 
    Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryWh6h4VZ1UIs13Tal 
    Host:localhost:8080 
    Origin:http://localhost:3000 
    Referer:http://localhost:3000/ 
    User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 
    Request Payload 
    ------WebKitFormBoundaryWh6h4VZ1UIs13Tal 
    Content-Disposition: form-data; name="file"; filename="download.png" 
    Content-Type: image/png 


------WebKitFormBoundaryWh6h4VZ1UIs13Tal--

HERE問題情景b）畫布內容：

let canvas = <HTMLCanvasElement> document.getElementById('main_canvas_container').firstElementChild; 
     canvas.toBlob((blob) => { 
    let formData = new FormData(); 
    formData.append('file', blob, 'file.png'); 
    let headers = new Headers(); 
    headers.append('Authorization', currentUser.token); 
    let options = new RequestOptions({ headers }); 
    this.http.post(this.apiUrl, formData, options) 
     .map((response: Response) => { 
      return response; 
     }) 
     .catch(this.handleError); 
}

方案b）要求：

Request URL:http://localhost:8080/public/api/image 
Request Method:POST 
Status Code:200 
Remote Address:[::1]:8080 
Referrer Policy:no-referrer-when-downgrade 
Response Headers 
    view source 
    Access-Control-Allow-Credentials:true 
    Access-Control-Allow-Origin:http://localhost:3000 
    Cache-Control:no-cache, no-store, max-age=0, must-revalidate 
    Content-Length:0 
    Content-Type:application/json;charset=ISO-8859-1 
    Date:Fri, 21 Apr 2017 07:00:17 GMT 
    Expires:0 
    Pragma:no-cache 
    Vary:Origin 
    X-Content-Type-Options:nosniff 
    X-Frame-Options:DENY 
    X-XSS-Protection:1; mode=block 
Request Headers 
    view source 
    Accept:application/json, text/plain, */* 
    Accept-Encoding:gzip, deflate, br 
    Accept-Language:en-US,en;q=0.8,pl;q=0.6 
    Authorization:eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJhZG1pbiIsImF1ZGllbmNlIjoid2ViIiwiY3JlYXRlZCI6MTQ5MjU0Nzc5OTYxMiwiZXhwIjoxNDkzMTUyNTk5fQ.YKhBf1bOS-egqLahtIFWI5t2vrAEbwHss96itIO8HanKU0V38XdOOY-ZJV41wE5oSqmOoGVUYXJMoxXYrLOzXw 
    Connection:keep-alive 
    Content-Length:11552 
    Content-Type:multipart/form-data; boundary=----WebKitFormBoundarylO2dld6ISjr1W9E6 
    Host:localhost:8080 
    Origin:http://localhost:3000 
    Referer:http://localhost:3000/ 
    User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36 
    Request Payload 
    ------WebKitFormBoundarylO2dld6ISjr1W9E6 
    Content-Disposition: form-data; name="file"; filename="file.png" 
    Content-Type: image/png 


------WebKitFormBoundarylO2dld6ISjr1W9E6--

服務器端：

@PostMapping("/public/api/image") 
public ResponseEntity<String> handleFileUpload(@RequestParam MultipartFile file) { 
    try { 
     Files.copy(file.getInputStream(), this.rootLocation.resolve(file.getOriginalFilename())); 
    } catch (IOException e) { 
     throw new StorageException("Failed to store file " + file.getOriginalFilename(), e); 
    } 
    return ResponseEntity.ok(""); 
}

來源

2017-04-21 mrh

原來，它是負責我的畫布（Blend4Web）呈現內容框架的問題。當我直接從框架提供的方法獲取blob對象時，我能夠毫無問題地上傳文件。我共享的代碼工作正常，因此可以用作參考。我向那些花時間分析它的人道歉。

來源

2017-05-09 12:38:06 mrh

上傳HTML5畫布圖像到服務器Angular2/Spring Boot

回答

相關問題