0
HTML5キャンバスイメージをサーバーにアップロードしようとしています。 残念ながら、キャンバスをblobに変換してサーバーにアップロードすると、イメージを開くことができません。HTML5キャンバスイメージをサーバーにアップロードAngular2/Spring Boot
私の実装では、シナリオa）は、以下で正常に動作している：
- 右
- を選択し、キャンバス画像ファイル形式のディスクタイプ=「ファイル」と入力フォームを経由してディスクに画像としてキャンバス保存]をクリックします いるFormDataオブジェクトにAJAXを経由して、フォームで選択
- センドファイル
- 読むアップロードファイル
理想のシナリオB）：
- キャンバス
- から直接画像データを取得するAJAX経由キャンバスデータを送るいるFormDataオブジェクト内
- 読む私から直接ファイルアップロードをPNG形式開くと、ファイル
をアップロードキャンバス（シナリオb）イメージは空白ですが、正しい幅と高さを持つことがわかります。 メモ帳ファイルで正しいファイルと内容を比較すると、同じ乞い/終わりがありますが、途中で違います。 要求の唯一の違いはContent-Lengthです。
テクノロジ・スタック： 2.4.6 角度春ブーツ1.5.2
シナリオa）は、ファイルのアップロードを持つ：
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);
シナリオa）の要求：HERE
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--
は問題ですか？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("");
}