Загрузка zip-файла из http api в react, получение ошибки: "Невозможно развернуть file.zip . Это неподдерживаемый формат "

#reactjs #django #api #django-views #zip

#reactjs #django #API #django-просмотры #zip

Вопрос:

Заранее спасибо за просмотр. Я работаю над возможностью загрузки zip-файла из react через запрос API django. Я могу щелкнуть по своему всплывающему окну, которое загружает zip-файл, но когда я дважды щелкаю по zip-файлу, чтобы открыть, я получаю эту ошибку: «Невозможно развернуть file_name.zip . Это неподдерживаемый формат» Мой ответ с zip-файлом, похоже, правильно передается во внешний интерфейс, поэтому я думаю, что может быть что-то не так с кодом react при создании «blob»? Еще раз спасибо.

Код Django:

 class DownloadZip(APIView):
    def post(self, request, format=None):

        # information to find file to create zip
        profile_name = request.data["profile"]
        profile_year = request.data["year"]
        
        # file path to create zips from
        path = str(Path(__file__).parent.resolve())
                
        zip_dir = shutil.make_archive(profile_name   profile_year, "zip", path   "/"   profile_name   profile_year)

        s = io.StringIO(zip_dir)

        response = HttpResponse(s, content_type = "application/zip")

        zip_name = profile_name   profile_year   ".zip"

        response["Content-Disposition"] = f"attachment; filename={zip_name}"
        
        return response

Код реакции:

     downloadZip = async () => {
        const params = {
            profile: this.state.profileName,
            year: this.state.year,
        };
        axios({
            url: `${serverUrl}/download_zip`,
            method: "post",
            data: params
        }).then(
            (res) => {
                const url = window.URL.createObjectURL(new Blob([res.data],{type:'application/zip'}));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'file.zip');
                document.body.appendChild(link);
                link.click();
                link.parentNode.removeChild(link);
            },
            (error) => {
                console.log(error);
            });
        }

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

1. Странно, что вы используете метод HTTP post для загрузки файла, вместо этого используйте HTTP GET

2. К сожалению, мне приходится просматривать некоторые данные, чтобы найти файл, соответствующий выбранным параметрам, чтобы вернуть правильный zip. Get не работает с передачей этих данных через

3. Вы можете использовать параметры запроса

4. Я попытаюсь это сделать и обновлю, если это устранит проблему. Спасибо!

5. @ArakkalAbu Я изменил его, чтобы получить с параметрами запроса, получив ту же ошибку

Ответ №1:

Пожалуйста, попробуйте добавить {responseType: ‘arraybuffer’} . У меня также была такая же проблема, но после добавления этого {responseType: ‘arraybuffer’} . Я получаю правильный файл.

  downloadZip = async () => {
        const params = {
            profile: this.state.profileName,
            year: this.state.year,
        };
        axios.post(
              `${serverUrl}/download_zip`,
              params,
              {
                  responseType: 'arraybuffer'
              }
        ).then(
            (res) => {
                const url = window.URL.createObjectURL(new Blob([res.data],{type:'application/zip'}));
                const link = document.createElement('a');
                link.href = url;
                link.setAttribute('download', 'file.zip');
                document.body.appendChild(link);
                link.click();
                link.parentNode.removeChild(link);
            },
            (error) => {
                console.log(error);
            });
        }