js Spring Boot реализует простую загрузку файлов через интерфейс и серверную часть function

js Spring Boot реализует простые внешние и внутренние функции загрузки файлов.

2024-07-12

Проект js+boot реализует индивидуальную загрузку

1. Главная страница

1. Сначала импортируйте пакет axios js.

2. Обратите внимание на формат ответа axios:result.data.реальное содержание данных

3. Запрошенный здесь URL-адрес — это URL-адрес getMapping вашего загрузочного проекта, просто сохраняйте его согласованность.

4. Если вы хотите установить его на серверную частьимя файла, то после создания серверной части он ответит полем fileName, а внешний интерфейс проанализирует значение.

Вот js, добавленный на страницутег, вызовите метод click, чтобы реализовать переход, запускающий код.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.min.js"></script>
</head>
<body>
<h2>模拟下载</h2>
<button onclick="downloading()">Click me</button>
</body>
<script>
    async function downloading() {
        const result = await axios.get('http://localhost:8080/download');
        console.log(result.data)
        if (result.data.code === 200) {
            const blob = new Blob([result.data.data], {type: 'text/plain;charset=utf-8'});
            const link = document.createElement('a')
            link.style.display = 'none'
            const url = URL.createObjectURL(blob)
            link.href = url
            link.download = '文件名.txt'
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
            URL.revokeObjectURL(url)
        } else {
            alert("下载失败！")
        }
    }

</script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

2. Серверный код

1. Многие демки в интернете возвращают респ через настройки.Тело запросаЭтот метод реализован. Вот еще одна идея, заключающаяся в возврате массива данных, если он находится в других форматах, таких как Excel, вы можете ответить, вернув двоичные данные byte[].

2. Если нет чистого кода ASCII, такого как китайский, вы можете установить ответ base64. Если есть кодировка Unicode, не используйте кодировку base64, иначе внешний метод atob() приведет к искажению символов.

3. Здесь используется Gson, и посредством его форматирования карта преобразуется в строку json и возвращается во внешний интерфейс.

    @GetMapping("/download")
    @ResponseBody
    public String downloadFile() {

        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < 500; i++) {
            sb.append("模拟一条数据").append(i).append("n");
        }

        Map<String, Object> resultMap = new HashMap<>(6);
        resultMap.put("code", 200);
        resultMap.put("data", sb.toString());

        return gson.toJson(resultMap);
    }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2. Тестирование запуска проекта

Вставьте сюда описание изображения
Доступ к запуску проекта: http://localhost:8080/toIndex.

Вставьте сюда описание изображения
Нажмите кнопку, чтобы скачать

Посмотреть текстовый текст

4. Резюме

Выше приведена простая демонстрация реализации функции загрузки файлов.
Хотя интерфейсная часть и серверная часть здесь не разрабатываются отдельно, концепция дизайна полностью передает данные в соответствии с внутренней частью и не выполняет слишком большую обработку представления, что по-прежнему очень ценно для справки и обучения.

Я проигнорировал множество деталей, показав только основные части.
Например, загрузка файлов включает загрузку по субподряду, сегментированную загрузку больших файлов и т. д.
Например, обобщение форматов загрузки и т. д.

Я надеюсь, что это поможет всем решить проблему. Пожалуйста, поставьте мне много лайков, чтобы помочь блоггеру продолжать обновляться ~
Влиятельные люди слегка распылялись, это была всего лишь простая демонстрация, и они учились друг у друга.

Обмен технологиями