Reactでバイトストリームとしてファイルをアップロードする

Question

私は、JavaスプリングブートAPIを介してデータベースに保存する必要があるファイルがあります。

ReactJSフロントエンドコード：

getContractBase64(vendor, value, index) { 
    const reader = new FileReader(); 
    reader.readAsDataURL(value); 
    const scope = this; 
    reader.onload = function load() { 
     vendor.contracts[index] = reader.result; 
    }; 
    reader.onloadend = function loadend() { 
     scope.setState({ vendor }); 
    }; 
    this.setState({ vendor }); 
    } 

私は、RESTエンドポイントにベンダーのエンティティを送ります。

Javaの春は、バックエンドのコードエンティティをブート：

private byte[] document; 

コントローラ：試みは、ファイルをアップロードするためになされた場合

@ApiOperation("Update a vendor") 
@ApiResponses({ @ApiResponse(code = 200, message = SwaggerDescriptions.RESPONSE_CODE_200), 
     @ApiResponse(code = 400, message = SwaggerDescriptions.RESPONSE_CODE_400), 
     @ApiResponse(code = 403, message = SwaggerDescriptions.RESPONSE_CODE_403) }) 
@RequestMapping(method = RequestMethod.PUT, value = "/{id}", produces = MediaType.APPLICATION_JSON_VALUE) 
public VendorEntity update(@RequestBody @Valid VendorEntity entity) throws Exception { 
    return vendorService.update(entity); 
} 

、それは次のようなエラーがスローされます。

Failed to read HTTP message: org.springframework.http.converter.HttpMessageNotReadableException: Could not read document: Can not construct instance of com.core.vendor.domain.ContractEntity: no String-argument constructor/factory method to deserialize from String value ('Can not construct instance of com.core.vendor.domain.ContractEntity: no String-argument constructor/factory method to deserialize from String value ('data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBBQABg.......) 

Request Header: 
    contracts{ 
    0:"data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,UEsDBBQABgAIAAAAIQCQdr5P... 

Answer 1

したがって、境界がある複数の部分形式のデータとして送信する必要があります。このようにバックエンドを呼び出すことができます。

export function uploadFile (fileData, fileName) { 
    let formData = new FormData() 
    formData.append('prop1', 'value1') 
    formData.append('prop2', 'value2') 
    formData.append('upload', imgData, fileName) 
    return fetch('/your/endpoint', { 
    headers: { 
     'Accept': 'application/json', 
     'X-Authorization': 'your-token-here' 
    }, 
    method: 'POST', 
    body: formData 
    }).then(function (response) { 
    // handle your response payload here. 
    }); 
}