Upload image with ng

I am using ng-file-upload to try and upload an image to a spring boot rest api. So far I have been unable to get it working.

My approach is to map an object which contains an image, build the object on the front-end and post the object to my rest api and insert the image into the database.

Each time I try this, I get an internal 500 error on the backend with the error message

[org.springframework.http.converter.HttpMessageNotReadableException: Could not read document: Can not deserialize instance of byte[] out of START_OBJECT token

I am working under the assumption that image can be stored as Byte[] and the passing from Angular to Spring will be similar to passing a string for example.

On my server-side I have created an object Image

public class Image implements Serializable {

   private byte[] profilePic;

   private String user_id;

   private String profilePicContentType;

   //getter & setter methods below

}

My rest service is

@RequestMapping(value = "/images",
    method = RequestMethod.POST,
    produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public ResponseEntity<Image> createImage(@RequestBody Image image) throws URISyntaxException {
    log.debug("REST request to save Image : {}", image);
    if (image.getId() != null) {
        return ResponseEntity.badRequest().headers(HeaderUtil.createFailureAlert("image", "idexists", "A new image cannot already have an ID")).body(null);
    }
    Image result = imageService.save(image);
    return ResponseEntity.created(new URI("/api/images/" + result.getId()))
        .headers(HeaderUtil.createEntityCreationAlert("image", result.getId().toString()))
        .body(result);
}

On my front-end side I use the basic demo ng-file-upload code to select the image

 <div class="btn btn-primary" ngf-select ng-model="vm.settingsAccount.profilePic" name="file" ngf-pattern="'image/*'"
                ngf-accept="'image/*'" ngf-max-size="16MB" ngf-min-height="100" 
                ngf-resize="{width: 100, height: 100}">Select</div>

My angular controller takes the content from the form and builds an obeject and passes it to the resource controller that calls my rest api

var imageDomain = function (settingsAccount){
            return {
                profilePic: settingsAccount.profilePic,
                user_id : settingsAccount.login,
                profile_pic_content_type : 'UTF-8'
            }   
        }

function save(){
   vm.image = imageDomain(vm.settingsAccount);
   ImageService.update(vm.image); 
}

Any help or suggestions would be great.

Thanks.

EDIT: After playing around I have something working, it is a compromise and not as elegant as I would hope but at least it will allow me to proceed with my POC.

I scrapped trying to use angular Resource to do the REST API and used Upload function as outlined in ng-file-upload directive.

Upload.upload({
url: 'api/fileUpload',
data: {file: vm.settingsAccount.profilePic}
}) 

And on the server side, instead of using @RequestBody I switched to using @RequestParam

@RequestMapping(value = "/fileUpload",
method = RequestMethod.POST,
produces = MediaType.APPLICATION_JSON_VALUE)
@Timed
public String uploadImage(@RequestParam(value = "file") final MultipartFile   image) throws URISyntaxException, IOException {
log.debug("REST request to save Image : {}", image );

//Convert to byte[] so can insert into MongoDB        
byte[] bytes = image.getBytes();    

//Insert to DB code below

}

I hope this help someone else out.

链接地址: http://www.djcxy.com/p/48778.html

上一篇: django REST结合了json卷曲的2种模型视图形式

下一篇: 用ng上传图片