如何将存储为 BLOB 的图像从宁静的 Web 服务发送到前端？答案

【问题标题】：How to send an image stored as BLOB to front end from a restful web service?如何将存储为 BLOB 的图像从宁静的 Web 服务发送到前端？
【发布时间】：2018-02-15 20:37:39
【问题描述】：

我现在有一个 Web 服务，它从前端获取图像并将其保存为数据库中的 BLOB。我想从数据库中获取图像并将其发送回前端并在那里显示图像。

我该怎么做？

这是我的模特：

@Entity 
public class Document {

@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;

@Lob
private byte[] image;

public Document(){}

public Document(byte[] image) {
    this.image = image;
}

这是服务：

@Service

public class DocumentServiceImpl implements DocumentService {

private DocumentRepository documentRepository;

@Autowired
public DocumentServiceImpl(DocumentRepository documentRepository) {
    this.documentRepository = documentRepository;
}


@Override
public void saveDocument(Document document) {
    documentRepository.save(document);
}

@Override
public List<Document> getAllDocuments() {
    return documentRepository.findAll();
}

@Override
public void deleteDocument(Integer id) {
    documentRepository.delete(id);
}

@Override
public Document getById(Integer id) {
    return documentRepository.getOne(id);
}

这是控制器：

@Controller
public class DocumentController {

private DocumentService documentService;

public DocumentController(DocumentService documentService) {
    this.documentService = documentService;
}


@RequestMapping(value="/upload", method= RequestMethod.POST)
@ResponseBody
public ResponseEntity<?> saveNewDocument(@RequestParam("file")MultipartFile file, HttpServletRequest httpServletRequest){

    if (file.isEmpty()) {
        return ResponseEntity.status(HttpStatus.BAD_REQUEST).body("Please select a file to upload.");
    }

    try {
        byte[] bytes = file.getBytes();
        Document document = new Document();
        document.setImage(bytes);
        documentService.saveDocument(document);
        return ResponseEntity.status(HttpStatus.OK).body("File uploaded succesfully");

    } catch (IOException e) {
        e.printStackTrace();
        return ResponseEntity.status(HttpStatus.INTERNAL_SERVER_ERROR).body("File could not be uploaded");
    }


}

前端：

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <title>FileUpload</title>
</head>
<body>

<form method="POST" action="/upload" enctype="multipart/form-data">
    <input type="file" name="file" /><br/><br/>
    <input type="submit" value="Submit" />
</form>

</body>
</html>

【问题讨论】：

标签： json spring image rest spring-boot

【解决方案1】：

我猜你可以这样做：

控制器：

@RestController
@RequestMapping("/image")
public class ImageController {

    @RequestMapping(value = "{imageId}", method = RequestMethod.GET)
    public ResponseEntity getImage(@PathVariable("imageId") Long imageId) {
        Document doc = documentService.findOne(imageId);
        if (doc == null) {
            return new ResponseEntity<>(HttpStatus.NOT_FOUND);
        }
        return ResponseEntity.ok().header(HttpHeaders.CONTENT_TYPE, "image/*").body(doc.getImage());
    }
}

HTML：

...
<img src="/image/{imageId}">
...

【讨论】：