从后端获取上传的图像(资源),并将其显示为angular7

时间:2019-06-25 09:27:43

标签: javascript java spring-boot angular7 multipartform-data

我想在我的网站上显示一个瓶子的数据,这个瓶子包含一个可变字符串,它实际上是后端存储图像的路径。 我希望能够以角度方式操纵此资源,然后显示在html中获得的图像

我可以从前端发出请求,然后我不知道如何接收

请求到后端(通过服务)

getBottleImage(path): Observable<File[]> {
    return  this.http.get<File[]>('http://localhost:8762/image/downloadFile/' + path);
}

这是我的两个上传和获取(后端)功能:

存储文件:

public String storeFile(MultipartFile file) {
    // Normalize file name
    String fileName = StringUtils.cleanPath(file.getOriginalFilename());

    try {
        // Check if the file's name contains invalid characters
        if(fileName.contains("..")) {
            throw new FileStorageException("Sorry! Filename contains invalid path sequence " + fileName);
        }

        // Copy file to the target location (Replacing existing file with the same name)
        Path targetLocation = this.fileStorageLocation.resolve(fileName);
        Files.copy(file.getInputStream(), targetLocation, StandardCopyOption.REPLACE_EXISTING);
        logger.info("targetLocation " +targetLocation);
        return fileName;
    } catch (IOException ex) {
        throw new FileStorageException("Impossible de stocker le fichier" + fileName + ". S'il vous plait réessayez !", ex);
    }
}

获取文件:

public Resource loadFileAsResource(String fileName) {
    try {
        Path filePath = this.fileStorageLocation.resolve(fileName).normalize();
        Resource resource = new UrlResource(filePath.toUri());
        if(resource.exists()) {
            return resource;
        } else {
            throw new MyFileNotFoundException("Fichier non trouvé" + fileName);
        }
    } catch (MalformedURLException ex) {
        throw new MyFileNotFoundException("Fichier non trouvé " + fileName, ex);
    }
}

邮递员直接向我显示结果(.txt或.png文件)

https://ibb.co/2n7yd2j

所以我认为这是一个前端问题。

0 个答案:

没有答案