0

Встал вопрос - как отрисовать N картинок, если Spring может возвращать из метода только одно изображение? У меня был запрос на получение имени файлом, но никак не получалось вернуть именно нужное количество изображений. Я нашёл решение и захотел им поделиться.

1 ответ 1

0

Для начала создадим метод, который будет отправлять нам список названий файлов:

    @RequestMapping(value = "/getTrophies/{id}", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
    public ResponseEntity<ArrayList<TrophiesDTO>> getTrophies(@PathVariable String id) throws IOException {
        if (!playerRepository.existsByNick(id))
            throw new AppException("Неизвестный пользователь", HttpStatus.BAD_REQUEST);

        PlayerDoc playerDoc = playerRepository.findByNick(id).get(0);
        ArrayList<String> trophies = playerDoc.getTrophies();

        ArrayList<TrophiesDTO> list = new ArrayList<>();
        for (String trophy : trophies){
            list.add(new TrophiesDTO(trophy));
        }

        return ResponseEntity.ok(list);
    }

Теперь создадим метод, который будет возвращать нам изображение:

    @RequestMapping(value = "/getImage/{id}", method = RequestMethod.GET)
    public ResponseEntity<byte[]> getFile(@PathVariable String id) throws IOException {
        String path = "";
        if (fileRepository.existsByFileName(id))
            path = fileRepository.findByFileName(id).get(0).getLink();
        else throw new AppException("Неизвестный параметр", HttpStatus.BAD_REQUEST);

        String mediaType = getMediaType(path);

        File file = new File(imageDirectory + path);

        byte[] fileContent = Files.readAllBytes(file.toPath());

        return ResponseEntity.ok().contentLength(fileContent.length).contentType(MediaType.parseMediaType(mediaType)).body(fileContent);
    }


    private String getMediaType(String path){
        String extension = path.substring(path.lastIndexOf("."));

        return switch (extension) {
            case ".png" -> "image/png";
            case ".jpg" -> "image/jpg";
            case ".jpeg" -> "image/jpeg";
            case ".webp" -> "image/webp";
            case ".svg" -> "image/svg+xml";
            default -> "";
        };
    }

На React'е я использовал axios: npm install axios

Создадим функцию, которая будет отвечать за запросы:

axios.defaults.baseURL = "http://localhost:8084/";
axios.defaults.headers.post["Content-Type"] = "application/json";
const request = (method, url, data, headers={}, responseType="") =>{
    if (responseType !== ""){
        return axios({
            method: method,
            headers: headers,
            url: url,
            data: data,
            responseType: 'blob'
        });
    }
    return axios({
        method: method,
        headers: headers,
        url: url,
        data: data
    });
};

Также потребуются useState и useEffect.

Оставшаяся часть кода, где мы вызываем useState и нужную функцию в нём:

    function getElemByValue(arr, value, key) {
        for (let i = 0; i < arr.length; ++i){
            if (arr[i][key] === value){
                return i;
            }
        }
    }

    const getTrophies = () => {
        request("GET", "/getTrophies/" + params.id, {}, {"Accept": "application/json","Content-Type": "application/json"}).then((resp) =>{
            resp.data.map((trophy) =>{
                getTrophiesImg(resp.data, trophy);
            });
        });
    }

    const getTrophiesImg = (arr, trophy) => {
        request("GET", "/getImage/" + trophy.alt, {}, {"Content-Type": "image/jpeg"}, "blob").then((resp) =>{
            let temp = arr;
            temp[getElemByValue(temp, trophy.alt, "alt")]["src"] = URL.createObjectURL(resp.data);
            setTrophies(temp);
        });
    }

    useEffect(() => {
        getTrophies();
    }, []);

Также я использовал useParams, чтоб получить параметр из адреса:

const params = useParams()

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.