Вопрос:

Как мне скачать zip с несколькими типами файлов с помощью axios

javascript vue.js axios

55 просмотра

2 ответа

278 Репутация автора

В моем приложении vueJs у меня есть следующий вызов axi POST api, который должен вернуть несколько файлов, которые я хочу сохранить в папке .zip. однако, когда я использую следующий метод axios, я не могу открыть свой zip, и возникает ошибка, говорящая, что «my folder.zip недействителен».

Как правильно загрузить response.data?

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

upload() {
      console.log("uploading")
      let formData = new FormData();
      let gerarMenus = "on";
      let zipName= "test";
      let var1= "on";
      let var2= "on";
      let var3= "on";
      let var4= "on";
       this.files.forEach((f,x) => {
         formData.append('file'+(x+1), f);

       });
       formData.append('zipName', zipName);
         formData.append('var1', var1);
         formData.append('var2', var2);
         formData.append('var3', var3);
         formData.append('var4', var4);

       axios
         .post("/myUrl/downloadFile", formData)
         .then((response) => {
           console.log(response.data)
            const url = window.URL.createObjectURL(new Blob([response]));
            const link = document.createElement('a');
            link.href = url;
            link.setAttribute('download', zipName+ '.zip');
            document.body.appendChild(link);
            link.click()}
            ).catch(e => {
          console.error(e);
        });

РЕДАКТИРОВАТЬ: Я попробовал ответ Tony19, но я все еще получаю ту же ошибку. Не уверен, если это какая-то помощь, но я полагаю, чтобы получить несколько файлов XML и SQL.

EDIT2: вот печать response.data в моем console.log (): введите описание изображения здесь

Автор: Otorrinolaringologista -man Источник Размещён: 09.08.2019 09:54

Ответы (2)


3 плюса

30288 Репутация автора

В этой строке:

const url = window.URL.createObjectURL(new Blob([response])); // DON'T DO THIS
                                                 ^^^^^^^^

... вы создаете URL-адрес объекта для блоба всего объекта ответа Axios (включая код состояния HTTP, заголовки и т. д.), но на самом деле вы хотите, чтобы dataсвойство в нем было таким:

const url = window.URL.createObjectURL(new Blob([response.data]));
Автор: tony19 Размещён: 11.08.2019 08:45

0 плюса

3257 Репутация автора

Попробуйте установить responseTypeопцию blobв вашем запросе:

axios
     .post("/myUrl/downloadFile", formData, {
          responseType: 'blob'
     })

И использовать response.dataв конструкторе Blob, как уже упоминалось @ tony19.

Автор: Max Sinev Размещён: 12.08.2019 01:56
Вопросы из категории :
32x32